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

最新推荐文章于 2023-11-02 11:41:46 发布

weixin_30621919

最新推荐文章于 2023-11-02 11:41:46 发布

阅读量564

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/xumz/p/9558622.html

版权

今天拿到前端提供的页面，前端使用 <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     }