js中,使用<li>的自定义属性传值

今天拿到前端提供的页面,前端使用 <li> 标签实现滚动选择框的效果。

关于选择部分,后台主要传输 数据类型包涵 id 与 name 。id 为处理业务逻辑的依据,name 主要是用来显示。

由于 id 字段的数据包含非数字的字符,不能用 value 属性绑定(value属性只能绑定数字)。固使用 自定义属性绑定 id。

使用setAttribute方法绑定id值

 1 function getInfoList(){
 2         var _url = "getInfoList",
 3          _postData = {
 4         };
 5         common.ajax(_url, _postData, function (data) {
 6             if (data.status=='SUCCESS') {
 7             var list=data.result;
 8             var menu=document.getElementById("menu");
 9             for(var i=0;i<list.length;i++){
10                 var item=list[i];
11                 var li=document.createElement("li");
12                 var node=document.createTextNode(item.name);
13                 li.setAttribute("id", item.id);
14                 li.appendChild(node);
15                 menu.appendChild(li);
16             }
17             } else {
18                 common.tips("查询信息异常");
19             }
20         });
21     }

使用getAttribute拿到属性的值

 1 function choosePost(){
 3         var choose = document.getElementsByClassName("swiper-slide swiper-slide-active")[0];
 4         var _url = "getInfo",
 5             _postData = {
 6                 id:choose.getAttribute("id")
 7             };
 8             common.ajax(_url, _postData, function (data) {
 9                 if (data.status=='SUCCESS') {
10                 } else {
11                     common.tips("查询信息异常");
12                 }
13             });
14     }

 

转载于:https://www.cnblogs.com/xumz/p/9558622.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值