Question

我已经编写了一个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？

Answer 1

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

    $('.views-row-'+ i + ' .faq_more').click(function(){
        $(this).slideToggle();
    });

Answer 2

我认为你正在接近这个问题。在循环中绑定大量事件处理程序并不是一个好主意。你做这样的事情要好得多：

$('.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>

Answer 3

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

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

所以你只需要将外部函数变量的值传递给内部函数，而不是传递引用：

）;

Answer 4

最好找到另一种匹配元素的方法

，而不是变量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();

    });
}

JS for循环中的变量取最大值

4 个答案: