Javascript在循环中隐藏对象

Question

请帮帮我。我想通过点击链接来隐藏分机，但是出了点问题

但我只能写这个，不明白为什么它不起作用!也许还有另一种方法可以做到吗？它每次都具有相同的功能。到 li1 li2func，因此有 li1 Link to jsfiddler

html:`

<div>

<div class="left">
<ul>
        <li><a id="11" href="#">one</a></li>
        <li><a  id="12" href="#">two</a></li>
        <li><a id="13" href="#">three</a></li>
    </ul>

  </div>
  <div class="right">
  <p id="1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, qui.
  </p>
  <p id="2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus reiciendis veritatis voluptatibus optio explicabo? Dignissimos ex amet mollitia doloribus a.
  </p>
  <p id="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit porro quisquam harum nemo, vitae itaque.</p>
  </div>

</div>`

JS代码:

var el = document.getElementsByTagName("p");
var cs = document.getElementsByTagName("a");
if(el) {
    for (i = 0; i < el.length; i++) {
        td = cs[i];
        (function (_td) {
            td.addEventListener('click', function(){
                console.log(_td);
                console.log(i);
                document.getElementsByTagName("div")[i].className +=  document.getElementsByTagName("div")[i].className ? ' invis' : 'invis';
            });
        })(td);

Answer 1

您的 javascript 有一些问题。您应该已经注意到 javascript 控制台中的这个错误:“Uncaught TypeError: Cannot read property 'className' of undefined”，这可能让您发现 document.getElementsByTagName("div") 不是您应该使用的选择器。您完成了生成 p 标记数组(莫名其妙地命名为 el)的工作，但随后没有在您构建的闭包中对其进行任何引用。

这是解决该问题的一种方法:给你的闭包第二个参数，并将相应数字 (i) 的 p 标记传递给 a 标签，您要将点击处理程序绑定(bind)到该标签。然后修改 that 元素的 className 字符串。

var el = document.getElementsByTagName("p");
var cs = document.getElementsByTagName("a");

if(el) {
    for (i = 0; i < el.length; i++) {
         td = cs[i];
         ptag = el[i];
          (function (_td,_el) {
        td.addEventListener('click', function(){
            console.log(_td);
             console.log(i);
             _el.className += _el.className ? ' invis' : 'invis';
        });
    })(td,ptag);
    }
}

另一件事:您会注意到 console.log(i) 总是产生 3，因为 i 没有绑定(bind)到点击处理程序的范围，但是而不是 for 循环的外部范围，因此当用户单击其中一个 a 标记时，循环已经完成并且 i 将总是等于 3。