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

上次在切页面的过程中，碰到个要获取数据根据数据个数显示名字，且点击每个名字时候需要调用客户端的一个方法。并且传递当前点击的姓名的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值、显示到页面上，之后在给它添加点击事件，传递当前点击元素的值、

posted @ 2016-09-29 16:30  xiuber  阅读(386)  评论(0)  编辑  收藏  举报