JS for循環中的變量取最大值

我已經編寫了一個Javascript for-loop來自動隱藏和顯示點擊我網站上的一些內容，但由於某些原因，變量的取值最高循環結束......JS 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有一個clickHandler事件。
但由於某些原因，slideToggle線只適用於與views-row-6類線（其中不存在）...

所以在功能上的i-變量不環路的所有值適用。 ..
我該如何使它適用於所有view-row-x的？

來源

2013-02-07 Michiel

一種JavaScript的關閉搜索的另一種方式將幫助您更好地瞭解您的問題。 – Briguy37

你應該在點擊回調中用$（this）引用你的元素。在這裏，我將等於我的最後一個值。

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

來源

2013-02-07 14:32:58 Mickael

偉大的建議！但是，然後'.faq_more'元素被切換... – Michiel

對不起，我沒有看到，但你可以很容易地用jQuery得到他的父母或他的一個兄弟姐妹（我不知道確切的層次結構）。 – Mickael

@Michiel試試我的建議 –

我認爲你錯誤地接近了這個問題。在循環中綁定大量事件處理程序並不是一個好主意。你好得多做這樣的事情：

$('.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-07 14:34:25 boz

在Javascript中，變量的函數級範圍。解釋器會將每個變量定義移動到函數頂部（提升），以便引用此範圍內隨處可用的變量。因此，內部函數可以從外部函數（閉包）訪問變量。對於習慣於塊級作用域的每個人來說，一個問題是，這種機制包括將循環計數器綁定到內部函數，這是內部函數的壽命較長，然後是外部函數的一個例子。

在你的情況，因此，當回調被調用時，選擇將得到參考用的6的價值，即它是在結合結合至i不是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-07 14:53:19

取而代之的變量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-07 14:53:47 Bruno

JS for循環中的變量取最大值

回答

相關問題