html - 原生javascript的DOM操作，写demo时遇到了一个问题？

问题描述

问 题

这是我目前做的小demo，请问如何才能实现：
①点击li后，相同项只显示一个。比如我点击价格0-299，当我再点击300-600时，前面那个0-299去掉，只显示300-600；类别和品牌也同样，同一项只显示一个内容。
②如何排序，使得点击后，div显示的顺序始终是价格、类别、品牌

↓点击代码，可预览效果
https://jsfiddle.net/20170808...

本人刚学原生javascript，请不要说用JQuery

解决方案

• 不要直接在 body 上 appendChild, 所以在 html 结构上加上 <div id="selected"></div>, 专门用来显示选择的结果。

• js 部分直接上代码算了。

var aUl = document.getElementsByTagName('ul');

    for (var i = 0; i < aUl.length; i++) {
      var aLi = aUl[i].getElementsByTagName('li');
      for (var j = 0; j < aLi.length; j++) {
        fn1(aLi[j]);
      }
    }

    var selected = document.getElementById('selected')
    var body = document.getElementsByTagName('body')[0];

    function fn1(oLi) {
      oLi.onclick = function () {
        var peerLis = this.parentNode.getElementsByTagName('li') // 该类别下的所有 li
        for (var j=0;j<peerLis.length;j++) {
          peerLis[j].style.display = 'inline-block'
        } // 所有的 li 都设置为 inline-block ，也就是使得上一次点击的项可见
        this.style.display = 'none'; // 当前点击项不可见

        var catagory = this.parentNode.children[0].innerHTML // 点击的类别

        if (selected.innerHTML.indexOf(catagory) > -1) { // 已经有这个类别了
          var oDiv = document.getElementById(catagory) // 获得该类别对应的 div
          oDiv.getElementsByTagName('span')[0].innerHTML = this.innerHTML + 'x' // 修改显示的内容
        } else { // 没有这个类别对应的 div 元素
          var oDiv = document.createElement('div');
          oDiv.setAttribute('id', catagory)
          selected.appendChild(oDiv);
          var oSpan = document.createElement('span');
          oSpan.innerHTML = this.innerHTML + ' x';
          oDiv.appendChild(oSpan);
        }
        fn2(oDiv, this);
      };
    }

    function fn2(oDiv, oLi) {
      oDiv.onclick = function () {
        oLi.style.display = 'inline-block';
        this.parentNode.removeChild(this);
      };
    }

主要修改了 fn1 部分，有注释，自己看。

• css 不要所有的 div 都一个样式，

这篇关于html - 原生javascript的DOM操作，写demo时遇到了一个问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！