分类 Web 下的文章

前言

最近在学jQuery,今天来讲讲如何在web上利用jQuery动态生成列表,并对其每一个item做监听。


获取列表并对其进行遍历

一般的业务逻辑都是通过网络请求从后台中获取一个列表,在java中一般使用list存储。在js中就是一个数组了。

$.ajax({
        type:"POST",
        data:{userId:userId},
        url:server+"/order/getOrderByUserId",
        success:function (result) {
            if(result.code==200){
                createOrders(result.resultMap.list);
            }else{
                console.log(result);
                // showCommonModal(result.message);
            }
        },
        error:function (e) {
            alert("服务器异常,请稍后重试...");
        }
    });

这里我使用的是Ajax请求,result.resultMap.list就是我们所需要的列表集合了。

$.each(list,function (index,value) {
  ...
});

通过jQuery的$.each()就可以实现集合的遍历效果了,第一个参数list就是我们刚刚提到的列表集合,第二个参数传入一个函数,index是这个集合的下标(即0、1、2、3...),value是index对应的对象值。


通过集合遍历动态生成html

有了上述的遍历基础就可以正式通过遍历动态生成列表了。

  • 首先我们需要在html中编写一个div作为整个个动态生成列表的容器:

    <div class="content"></div>

  • 然后我们需要在遍历前创建一个变量:

    var item="";

  • 遍历的时候通过往该变量添加html:

     items+='<div class="container-fluid bg-white mt-2 item" id='+value.id+'>'+
                '<div class="row pt-2">'+
                    '<div class="col-8">' +
                        '<i class="fa fa-calendar mx-2" aria-hidden="true"></i><p class="d-inline-block date">'+value.createTime+'</p>'+
                    '</div>' +
                    '<div class="col-4"><p class="text-warning text-right align-items-center state">'+stateTxt+'</p></div>'+
                    '</div>' +
            '<div class="border-bottom"></div>' +
            '<p class="text-dark mt-2 books">'+value.bookName+'</p>'+
            '<div class="border-bottom"></div>' +
                '<div class="row mt-2">' +
                    '<div class="col-4 offset-8 text-right">合计:<i class="fa fa-jpy" aria-hidden="true"></i><p class="d-inline-block price">'+value.totalPrice+'</p></div>'+
                '</div>' +
            '</div>';
    
  • 最后通过append添加到之前定义的容器div中:

    $(".content").append(items);
    注:我们可以通过在div中添加自定义属性来存放我们在item监听中可能用到的数据:

items+='<div class="container-fluid bg-white mt-2 item" id='+value.id+'>'+

上述的id='+value.id+'就是一个自定义属性,当我们需要取出使用时可以通过以下写法来获取刚刚存进去的值:

var id=$(this).attr("id");

这样就完成了整个列表的动态生成了,这里我做的是一个订单列表,整个函数方法如下:

function createOrders(orders) {
var items="";
$.each(orders,function (index,value) {
    var stateTxt;
    if(value.state == "1"){
        stateTxt="待付款"
    }else if(value.state == "2"){
        stateTxt="待收货"
    }else if(value.state == "3"){
        stateTxt="已收货"
    }
    items+='<div class="container-fluid bg-white mt-2 item" id='+value.id+'>'+
                '<div class="row pt-2">'+
                    '<div class="col-8">' +
                        '<i class="fa fa-calendar mx-2" aria-hidden="true"></i><p class="d-inline-block date">'+value.createTime+'</p>'+
                    '</div>' +
                    '<div class="col-4"><p class="text-warning text-right align-items-center state">'+stateTxt+'</p></div>'+
                    '</div>' +
            '<div class="border-bottom"></div>' +
            '<p class="text-dark mt-2 books">'+value.bookName+'</p>'+
            '<div class="border-bottom"></div>' +
                '<div class="row mt-2">' +
                    '<div class="col-4 offset-8 text-right">合计:<i class="fa fa-jpy" aria-hidden="true"></i><p class="d-inline-block price">'+value.totalPrice+'</p></div>'+
                '</div>' +
            '</div>';
});
$(".content").append(items);
}

如何监听每个item的事件

$(".content").on('click','.item',function () {
   ...
})

我们需要通过注册上述那个列表容器的div也就是这里的.content的on事件来实现item事件的监听。on函数里面第一个参数是需要监听的事件,比如click点击事件;第二个参数是需要监听的位置,比如整个item(这里定义了每个item的div为.item),第三个参数就是监听是的函数回调了。


最后

最后看看效果图