0

我编写了一个 Javascript for 循环来自动隐藏和单击我网站上的某些内容，但由于某种原因，该变量在循环结束时取最高值...

所以

for (var i = 1; i <= 5; i++) {
    $('.views-row-' + i + ' .faq_answer').hide();
    $('.views-row-' + i + ' .faq_more').click(function () {
        $('.views-row-' + i + ' .faq_answer').slideToggle();
    });
}

所有.views-row .faq_answer元素都隐藏起来，并且.views-row .faq_more都有一个点击处理程序。
但是由于某种原因，该slideToggle行仅适用于带有类的行views-row-6（不存在）...

所以函数中的 i 变量并不适用于循环的所有值......
我怎样才能让它适用于所有view-row-x的？

4

4 回答 4

3

您应该在点击回调中使用 $(this) 引用您的元素。在这里，i 将等于 i 的最后一个值。

    $('.views-row-'+ i + ' .faq_more').click(function(){
        $(this).slideToggle();
    });
于 2013-02-07T14:32:58.110 回答
1

在 Javascript 中，变量具有函数级范围。解释器会将每个变量定义移动到函数的顶部（提升），以引用在该范围内随处可用的变量。因此，内部函数可以从外部函数（闭包）访问变量。对于习惯于块级作用域的每个人来说，这里的一个问题是，这种机制包括将循环计数器绑定到内部函数，这是内部函数比外部函数寿命更长的例子。

因此，在您的情况下，当回调被调用时，选择器将获得对您的循环计数器的引用i，其值为6，即绑定时绑定i不是 的值i。

因此，您只需将外部函数的变量的值传递给内部函数，而不是传递引用：

$('.views-row-'+ i + ' .faq_more').click(
    // pass value of i into the handler, not i itself
    function(i){
         // return the result of invoking the handler 
         // so that we can apply the current value of i to this result
         // and bind the whole closure as a handler to the click event
         return function(e) {
             $('.views-row-'+ i + ' .faq_answer').slideToggle();
         } 
    }(i)

);

于 2013-02-07T14:53:19.710 回答
1

我认为您正在错误地解决问题。在一个循环中绑定大量事件处理程序并不是一个好主意。你最好做这样的事情：

$('.faq_answer').hide();

$('.faq_more').click(function(){
    $(this).parent().find('.faq_answer').slideToggle();
});

我假设您的 html 类似于：

<div class="views-row-1">
    <a href="#" class="faq_more"></a>
    <div class="faq_answer"></div>
</div>
于 2013-02-07T14:34:25.607 回答
0

而不是变量i，最好找到另一种匹配元素的方法

for ( var i = 1 ; i <= 5; i++ ) {

    // faq_more elements have id 'more' + i
    // faq_more elements contain class faq_more
    // faq_answer elements have id 'answer' + i
    // faq_answer elements contain class faq_answer

    $( ".faq_more" ).hide();

    $( ".faq_more" ).click( function(){

        var id = $( this ).attr( "id" ).replace( "more", "answer" );
        $( "#" + id ).slideToggle();

    });
}
于 2013-02-07T14:53:47.957 回答