根据数据动态添加,显示新元素

上次在切页面的过程中,碰到个要获取数据根据数据个数显示名字,且点击每个名字时候需要调用客户端的一个方法。并且传递当前点击的姓名的id。。

我在这模拟一个数据,然后记录下方法,很简单的小方法。

首先,我们需要定义了页面的格式。

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span class="span">
        <span>查看</span>
        <span class="span2"></span>
        <span>的更多图集</span>
    </span>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
</html>

我们需要获取到的数据,且在页面上添加名字显示出来。

    var obj={},obj2={},obj3={};
    var array=[];
    obj.name="张三";
    obj.id="1";
    obj2.name="李四";
    obj2.id="2";
    obj3.name="王五";
    obj3.id="3";
    array.push(obj,obj2,obj3);//数据
    console.log(array.length);
    $(document).ready(function(){
        for(var i=0;i<array.length;i++){
            console.log(array[i]);
            $(".span2").append("<a class='name'>"+array[i].name+"</a>");
        }

        $(".name").click(function() {
            var index=$(this).index();
            alert(array[index].name);
            //visual.userClick(JSON.stringify(array[index]));
        });

    });

我模拟的数据,然后根据array里面有几个对象,我就向span里面添加几个a,显示对象的name值、显示到页面上,之后在给它添加点击事件,传递当前点击元素的值、

原文地址:https://www.cnblogs.com/xiuber/p/5920379.html