jq循環添加html綁定動態數據及事件

$(function () {
    let user =[
        {
            userId: '1',
            title: '張三',
            head: 'z'
        },
        {
            userId: '2',
            title: '張飛',
            head: 'z'
        }
        ,{
            userId: '3',
            title: '張飛1',
            head: 'z'
        }]
    let html=''
    for (let i = 0; i < user.length; i++) {
        html+= '<label class="weui-cell weui-check__label userclic" for="' + user[i].userId + '" onclick = "changeState()"  >'+
                    '<div class="weui-cell__bd">'+
                        '<p>' +user[i].title +'</p >'+
                    '</div>'+
                    '<div class="weui-cell__ft">'+
                        '<input type="radio" name="us" value="'+user[i].userId+'" class="weui-check" id="' + user[i].userId + '" checked="checked">'+
                        '<span class="weui-icon-checked">'+'</span>'+
                    '</div>'+
                '</label>'
    }


    $.each(user,function (index,element) {//index選擇器的index位置   element當前的元素(也可以用this選擇器)
        console.log(k,v)
        html+=`
            <label class="weui-cell weui-check__label userclic" for="${user[index].userId}" onclick = "changeState()" >
                    <div class="weui-cell__bd">
                        <p>(得${user[index].title}元)</p >
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" name="us" value="${user[index].userId}" class="weui-check" id="${user[index].userId}" checked="checked">
                        <span class="weui-icon-checked"></span>
                    </div>
            </label>
        `
    })

$(".apdn").append(html)




    function changeState(ele) {
        let doctorSex = $("input[name='us']:checked").val();
        console.log( doctorSex);

    }
    $(document).ready(function(){
        $("input").click(function(){
            console.log(this)
        });
    });

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章