jQuery：循環迭代編號的類？

我看着帖子jQuery: Loop iterating through numbered selectors?，它並沒有解決我的問題，並沒有看起來真的是一個真正的答案。jQuery：循環迭代編號的類？

我有一個<h3>標籤問題的標題列表，並且<p>下面有答案。我創建類每個Q &一個像這樣：

<h3 class="sec1">Question:</h3><p class="view1">Answer...</p> 
<h3 class="sec2">Question:</h3><p class="view2">Answer...</p> 
<h3 class="sec3">Question:</h3><p class="view3">Answer...</p>

我用下面的jQuery的循環，以減少redundacy我的21個問題。

$(document).ready(function() { 
    for (var i = 1; i < 21; i++) { 
     var link = ".sec" + i; 
     var content = ".view" + i; 

     $(link).click(function() { 
      $(content).toggle("fast"); 
     }); 
    } 
});

但它不適用於所有Q & A套，只有最後一套。即：如果我將最大值設置爲2（僅循環一次），它適用於第一組。請指教。由於

來源

2012-02-15 user864675

雖然我同意@gaffleck你應該改變你的方法，但我認爲解釋如何解決當前的方法是值得的。

問題是，點擊功能沒有得到content變量的副本，而是對同一個變量的引用。在循環結束時，值爲.view20。當任何元素被點擊時，它讀取該變量並返回.view20。

解決此問題的最簡單方法是將代碼移入單獨的函數。該函數中的content變量是函數每次調用的新變量。

function doIt(i){ 
    var link = ".sec" + i; 
    var content = ".view" + i; 

    $(link).click(function() { 
     alert(content); 
    }); 
} 

$(document).ready(function() { 
    for (var i = 1; i < 21; i++) { 
     doIt(i);  
    } 
});

在小提琴

http://jsfiddle.net/TcaUg/2/

注意，如果你點擊一個問題的警報有適當數量。可選地，你可以使函數內聯，儘管我發現在大多數情況下單獨的函數更清潔一些。

http://jsfiddle.net/TcaUg/1/

來源

2012-02-15 19:13:36

更簡單的方法來做到這一點，將是這樣的：

$(document).ready(function(){ 
    $("h3").click(function(){ 
     $(this).next("p").toggle("fast"); 
    }); 
});

這也是更安全的，你可以添加/刪除在未來的問題和答案，你會不會有更新功能。

來源

2012-02-15 19:04:48 gaffleck

我同意，唯一需要注意的是，這取決於html的結構。如果要在'h3'和'p'之間添加一個元素，這會失敗。另外，如果頁面上還有其他'h3'元素不應該具有此功能，那麼這將是一個問題。 – 2012-02-15 19:06:24

是的，更安全的使用泛型類來匹配問題和答案：$（document）.ready（function（）{（「h3.question」）。click（function（）{ $（this）.next （「p.answer」）。toggle（「fast」）; }）; }）; – gaffleck 2012-02-15 19:12:29

@gaffleck謝謝。絕對是一個潛在的解決方案但是就像詹姆斯說的那樣，我也有一些地方在使用。但這是一個很好的選擇。再次感謝您的反饋。 – user864675 2012-02-15 19:13:59

總結您的問題作出更合乎邏輯的結構爲您創造一個適當範圍的問題塊：

<div id="questions"> 
    <div class="question"> 
    <h3 class="sec1">Question:</h3><p class="view1">Answer...</p> 
    </div> 
    <div class="question"> 
    <h3 class="sec2">Question:</h3><p class="view2">Answer...</p> 
    </div> 
    <div class="question"> 
    <h3 class="sec3">Question:</h3><p class="view3">Answer...</p> 
    </div> 
</div>

現在遍歷它是這樣的：

$(function() { 
    $('#questions .question h3').click(function(){ 
    $(this).parent().find('.answer').toggle('fast'); 
    }); 
});

來源

2012-02-15 19:17:49

jQuery：循環迭代編號的類？

回答

相關問題