欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jq循环添加html绑定动态数据及事件

程序员文章站 2022-07-14 11:45:21
...
$(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)
        });
    });

 

相关标签: 总结 知识点