JS中的变量，用于获取最大值的循环

Variable in JS for-loop taking the max value

本文关键字：获取 最大值 用于 循环 变量 JS      更新时间：2023-09-26

我已经为循环编写了一个Javascript，可以在点击时自动隐藏和显示我网站上的一些内容，但由于某种原因，变量在循环结束时取了最高值。。。

所以

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都有一个clickhandler
但由于某些原因，slideToggle行仅适用于类为views-row-6的行（不存在）。。。

所以函数中的i变量并不适用于循环的所有值
如何使其适用于所有view-row-x？

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

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

我认为您处理问题的方法不正确。在一个循环中绑定许多事件处理程序不是一个好主意。你最好做这样的事情：

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

在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)

)；

最好找到另一种匹配元素的方法，而不是变量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", "answerswer" );
        $( "#" + id ).slideToggle();
    });
}
相关文章：