Question

我有2个班级项目列表

var listEditCommitLinks = document.getElementsByClassName('edit-comment-link');
var listEditCommitWrappers = document.getElementsByClassName('edit-commit-wrapper');

链接和包装

<a href="#" class="edit-commit-link">Edit</a>
<div class="edit-commit-wrapper">
 ..
</div>

式

.edit-commit-wrapper {
  display: none;
}

默认情况下，每个包装器都是隐藏的，并且应该在链接点击时使用fadetoggle（使用相同的列表索引nr）

但由于某些原因，这对我来说并不适合。用于遍历列表的js：

for (var i = 0; i < listEditCommitLinks.length; i++) {

    listEditCommitLinks[i].onclick = function () {
        listEditCommitWrappers[i].fadeToggle(200);
    }
}

错误：

未捕获TypeError：listEditCommitWrappers [i] .fadeToggle不是函数

加

how the divs look like

有没有办法解决这个问题？一个jQuery解决方案也很好（我在js之前试过这个但是还没有解决）。感谢

Answer 1

问题是，fadeToggle是一个jQuery实例方法，listEditCommitWrappers中的项是不是 jQuery对象。怎么样......

jQuery(function($) {
    $('.edit-commit-link').on('click', function(e) {
        e.preventDefault();
        $(this).next('.edit-commit-wrapper').fadeToggle(200);
    });
});

请参阅https://api.jquery.com/next/

工作jsFiddle~ http://jsfiddle.net/t4nh85cm/

为了让它与你的pastebin HTML一起使用，你可以试试这样的东西虽然我觉得它变得很乱

$(this).closest('.row').next('.edit-commit-wrapper').fadeToggle(200);

请参阅https://api.jquery.com/closest/

Answer 2

for循环不能正常工作，因为当for结束时，所有的I实际上都是（listEditCommitLinks.length + 1）。不是0,1,2 ......你可以写一个这样的闭包

for (var i = 0; i < listEditCommitLinks.length; i++) 
{
    listEditCommitLinks[i].onclick = (function (a) 
    {
        return function () 
        {
            listEditCommitWrappers[a].fadeToggle(200);
        }
    })(i);
}

列表类元素（索引）.fadetoggle（某些速度）不起作用

2 个答案: