Javascript在循环中隐藏对象

Question

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

但我只能写这个，而不是为什么它不起作用！ 也许有另一种方法可以做到这一点？ 它每次都填充相同的功能。 到li1 li2func，因此有li1链接到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控制台中注意到这个错误：“未捕获的TypeError：无法读取未定义的属性'className'”，这可能会让你发现document.getElementsByTagName("div")不是你应该使用的选择器。 你完成了生成一个p标签数组（莫名其妙地命名为el ）的工作，但是后来没有在你构建的闭包中对它进行任何引用。

这是修复该问题的一种方法：给你的闭包第二个参数，并将相应数字（ i ）的p标记传递给你绑定点击处理程序a标签。 然后修改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没有绑定到click处理程序的范围，而是for循环的外部范围，所以当用户点击其中一个时a标签，循环已经完成， i将始终等于3。

Answer 2

当你标记jquery ，你可以通过使用href最接近的li的index()来处理jquery

 $('ul > li > a').on('click' , function(){ var ThisId = $(this).closest('li').index(); $('div.right > p:eq('+ThisId+')').slideToggle(100); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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"> 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, qui. </p> <p id="2"> 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">3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit porro quisquam harum nemo, vitae itaque.</p> </div> </div> 

Answer 3

document.getElementsByTagName永远不会返回null，因此如果代码中的（el）是不必要的。 空数组将始终求值为true。 如果你想让我不等于3，那么你必须在它为0,1和2时将它添加到闭包中。我在这里称它为_index：

var paragraphs = document.getElementsByTagName("p");
var links = document.getElementsByTagName("a");

for (i = 0; i < paragraphs.length; i++) {
     link = links[i];
     paragraph = paragraphs[i];
     (function (_link,_paragraph, _index) {
         _link.addEventListener('click', function(){
             console.log(_link);
             console.log(_index);
             _paragraph.classList.toggle('invis');
        });
    })(link,paragraph, i);
}

这是一个更清洁的版本

function init(link, paragraph, index) {
    link.addEventListener('click', function(){
         paragraph.classList.toggle('invis');
    });
}

var paragraphs = document.getElementsByTagName("p");
var links = document.getElementsByTagName("a");

for (i = 0; i < paragraphs.length; i++) {
    init(links[i], paragraphs[i], i);
}