如何判斷JavaScript函數從while循環獲取哪個id？

Question

我有一個JavaScript函數來切換div來顯示/隱藏，它的工作原理是，如果我只有一個鏈接切換單個div。但我有一個while循環創建了幾個這樣的鏈接和div，每行一個。但只有第一個鏈接有效。我可以在我的id的末尾添加一個$作爲切換鏈接和div，我如何告訴JavaScript查找這個變量？

的JavaScript：

$(function(){ 
    var id = document.getElementById(); 
    $('#toggleDiv').click(function(){ 
     $('#targetDiv').toggle(); 
    }); 
}); 

PHP：

echo "<a href=\"javascript:void(0);\" id=\"toggleDiv$ctr\">; 
echo "<div id=\"targetDiv$ctr\" style=\"display:none;\">"; 

正如你所看到的，$點擊率讓個性化的各個環節和DIV，但我需要Java來確定正在單擊的#toggleDiv，允許它切換正確的#targetDiv。

任何幫助？

Answer 1

一個天真的和低效的，但可用的方法是這樣的：

var i = 0; 
while ($('#toggleDiv' + i).length) { 
    (function() { 
     // Copy the iteration variable, otherwise all of the links will toggle 
     // the *last* targetDiv instance! 
     var copy = i; 

     $('#toggleDiv' + copy).click(function() { 
      $('#targetDiv' + copy).toggle(); 
     }); 
    })(); 

    ++i; 
} 

一個更好的方法是將標籤都具有相同的CSS類的肘杆的div，然後採用相同的點擊處理程序到他們所有人（$('.toggle-link').click(...)）。該處理程序應該查看目標元素的ID並提取數字，然後找到匹配的targetDiv實例並切換它。採用這種方法，您將只有一個事件處理程序註冊。

隨着我在代碼中給出的方法，你將不得不每次翻轉格一個事件處理，這可能會導致在瀏覽器內存的問題，如果你有成千上萬這樣的鏈接。對於少數幾個鏈接來說，這可能很好，但如果您可能會得到很多鏈接，則可以考慮使用不同的方法。

Answer 2

爲所有id屬性以toggleDiv開頭的鏈接添加點擊事件監聽器。在事件處理函數，提取子toggleDiv後，尋找具有ID targetDiv<extracted_number>股利，並切換它：

$('a[id^=toggleDiv]').click(function() { 
    var id = $(this).attr('id'); 
    var number = id.substring('toggleDiv'.length); 
    $('#targetDiv' + number).toggle(); 
}); 

Answer 3

「你並不需要所有這些元素都有自己的ID，如果你結構你的html和jQuery選擇器正確;他們可以全部共享課程。

像這樣的東西可以在一個父/子設置工作：

$(".question").click(function() { 
    $(this).parent().children(".answer").toggle(); 
    }); 

PHP

echo '<div class="some-parent">'; 
echo '<a href="javascript:void(0);" class="question">question</a>'; 
echo '<div class="answer" style="display:none;">'; 
echo 'answer'; 
echo '</div>'; 

這裏是一個小提琴：http://jsfiddle.net/VPCcZ/1/

或者這樣的 「下一個」情況：

jQuery('.question').click(function(){ 
    if ($(this).next().css("display") == "none") { 
     $(this).next().attr('style', 'display: block !important'); 
    } else { 
     $(this).next().attr('style', 'display: none !important'); 
    } 
    }); 

PHP

echo '<a href="javascript:void(0);" class="question">'; 
echo '<div class="answer" style="display:none;">';