对比---添加,移除,提交,重置.

最新推荐文章于 2023-03-15 16:54:37 发布

YiYaYo

最新推荐文章于 2023-03-15 16:54:37 发布

阅读量972

点赞数

分类专栏： javascript 文章标签： function input delete

本文链接：https://blog.csdn.net/YiYaYo/article/details/2722062

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
  <script>
   var datas = [
     {id:'1',name:'华厦红利'},
     {id:'2',name:'茂业集团'},
     {id:'3',name:'成商集团'}
   ];
   var selectedIdx = {};
   function addCompare(fid){
    if( selectedIdx[fid] || getSelectedItems().length == 2 ) return;

    var ul = document.getElementById("compareItems");
    for(var i = 0; i < datas.length; i ++ ){
     if( datas[i].id == fid ){
      var li = document.createElement('li');
      var liid = datas[i].id;
      li.id = liid;
      var str = datas[i].name + ' <button οnclick="removeLI(/''+ liid + '/')">移除</button>';
      li.innerHTML = str;
      ul.appendChild(li);

      selectedIdx[datas[i].id] = datas[i].id;
      break;
     }
    }
   }

   function removeLI(liid){
    var ul = document.getElementById("compareItems");
    var li = document.getElementById(liid);
    if( li ){
     ul.removeChild(li);
     delete selectedIdx[liid];
    }
   }

   function clearItems(){
    selectedIdx = {};
    var ul = document.getElementById("compareItems");
    ul.innerHTML = '';
   }

   function getSelectedItems(){
    var result = [];
    var tmp = {};
    for(var p in selectedIdx){
     if( tmp[p] != selectedIdx[p] ){
      result.push(p);
     }
    }
    return result;
   }
  </script>
</head>
<body>
  <div style="width:90px;height:25px;border:2px solid orange;float:left;text-align:center">对比栏</div>
  <div style="width:200px;height:400px;border:1px solid black;clear:left;float:left;position:relative;padding:4px">
   <input id="input_id"> <button οnclick="addCompare(document.getElementById('input_id').value)">添加</button>
   <ul id="compareItems" style="display:block;list-style:none;width:100%">

   </ul>
   <br>
   <button οnclick="alert(getSelectedItems())">开始比较</button> <button οnclick="clearItems()">消除</button>
  </div>
</body>
</html>

YiYaYo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对比---添加,移除,提交,重置.

var datas = [ {id:1,name:华厦红利}, {id:2,name:茂业集团}, {id:3,name:成商集团} ]; var selectedIdx = {}; function addCompare(fid){ if( selectedIdx[fid] || getSelecte
复制链接

扫一扫