Question

所以我有这个问题。这种结构是以编程方式生成的

<ul id="container1">
  <li>Click 1</li>
  <li>Click 2</li>
  <li>Click 3</li>
</ul>

在生成时间点击事件处理程序被分配给这些“ li ”元素。基本上点击任何“ li ”会隐藏其他“ li ”元素，只会显示点击的元素。现在我想要做的是使用相同的导航克隆它的所有行为，我想在页面的其他部分也显示它。它看起来像这样

<ul id="container1">
  <li>Click 1</li>
  <li>Click 2</li>
  <li>Click 3</li>
</ul>

<ul id="container2">
  <li>Click Cloned 1</li>
  <li>Click Cloned 2</li>
  <li>Click Cloned 3</li>
</ul>

这里的诀窍是，当我点击' container2 '下的任何' li '元素时，操作将在' container1 上发生'可以说，如果我点击 '点击' 打开 '克隆1 container2的'， '点击2 '，'点击3 '将在' container1 '上消失。我必须在纯JS上编写代码，不允许使用外部库。我尝试了很多东西，没有任何效果。您是否知道如何使container2作为container1的别名工作？

Answer 1

下面可能是你想要的（当点击＃container2中的元素时，＃container1中的其他元素将消失）：

var alias = document.querySelector('#container2').childNodes;

Array.prototype.slice.call(alias)
  .forEach(function(el) {
    el.onclick = function() {
      var that = this;
      var targets = document.querySelector('#container1').childNodes;
      Array.prototype.slice.call(targets)
        .forEach(function(ta, i) {
          if (ta.nodeType === 1 && !that.parentNode.childNodes[i].isEqualNode(that)) {
            ta.style.display = 'none';
          }
        })
    };
  });

<ul id="container1">
  <li>Click 1</li>
  <li>Click 2</li>
  <li>Click 3</li>
</ul>

<ul id="container2">
  <li>Click Cloned 1</li>
  <li>Click Cloned 2</li>
  <li>Click Cloned 3</li>
</ul>

请参阅JSFiddle

如何像DOM元素一样创建“Alias”？

1 个答案: