如何使用JQuery將點擊功能分配給多個按鈕？

我有29個按鈕：todayResultsbutton0 .. todayResultsbutton28,
和29個divs：todayResultsUrls0 .. todayResultsUrls28。
我也有一個函數toggleVisibility（divName）來隱藏/顯示給定的div。我嘗試使用下面的代碼：如何使用JQuery將點擊功能分配給多個按鈕？

for (var i=0; i < 29; ++i) { 
    var b = "#todayResultsbutton"+i; 
    var d = "todayResultsUrls"+i; 
    $(b).click(function(){toggleVisibility(d);}); 
}

我認爲，這將導致每個按鈕點擊顯示/隱藏匹配格但實際的結果是，點擊任意按鈕（0 ... 28）節目/隱藏最後一個div - todayResultsUrls28。

有人能告訴我我在哪裏錯了嗎？
謝謝。

來源

2011-04-05 achiash

您可以發佈HTML樣本嗎？這將幫助我們知道如何構建代碼。 – 2011-04-05 14:43:10

使用班級。

$(".myClass").click(function() { 
    var d = $(this).attr("id").replace("button", "Urls"); 
    toggleVisibility(d); 
});

來源

2011-04-05 14:38:22 Maxx

這並不能解決調用'toggleVisibility（d）' – 2011-04-05 14:41:28

的問題，我解決了這個問題以適合您的例子。只需將所有按鈕放在同一個類中，並在click函數內部替換標識爲按鈕的id部分，而不是url。 – Maxx 2011-04-05 14:44:37

使用

VAR d = 「#todayResultsUrls」 + I;

代替

VAR d = 「todayResultsUrls」 + I;

來源

2011-04-05 14:42:56 evotopid

您可以使用「startsWith」屬性選擇器與id，然後從單擊的項目的id生成URL。

$('[id^=todayResultsbutton]').click(function() { 
    var url = this.id.replace(/button/,'Urls'); 
    toggleVisibility(url); 
});

來源

2011-04-05 14:44:59 tvanfosson

而不是試圖用一個循環，你會更好使用選擇「發現」你的div ..

說，你有這樣的：

<table> 
<tr><td> 
<input type="button" id="myButton" value="test" text="test" /> 
</td><td><div id="myDiv"></div></td></tr></table>

你通過查找培訓相關的div USINT的event target而

$('#myButton').parent().find('#myDiv').hide();

來源

2011-04-05 14:44:59 Patrick

可見性切換：可以找到myDiv通過不是類等

假設：

<div id='todayResultsUrls1'> 
    <button id='todayResultsbutton'></button> 
</div>

使用事件的目標，你可以得到的按鈕元素，找到要隱藏的股利。

var parentDiv = $(e.target).parent(); 
toggleVisibility(parentDiv);

來源

2011-04-05 14:46:45 StuperUser

您可以使用此：

$('button[id^="todayResultsbutton"]').click(function() { 
    var index = this.id.substring(18,this.id.length); 
    toggleVisibility("todayResultsUrls"+index); 
});

這會發現所有<button>標籤與標識的開始todayResultsbutton。然後它將獲得點擊標籤的ID，將其中的todayResultsbutton部分刪除以獲取該ID，然後調用toggleVisibilty()函數。

示例here。

編輯
注：

使用button與選擇（[id^="todayResultsbutton"]）在開始之前加快jQuery選擇，因爲它可以使用本機getElementsByTagName函數來獲取所有按鈕標籤，然後只檢查那些爲特定的ID。
this.id用來代替jQuery的$(this).attr('id')，因爲它速度更快（不需要打包this或調用附加功能attr()），並且不應導致任何跨瀏覽器問題。

來源

2011-04-05 14:47:36

謝謝，完美的作品！ – achiash 2011-04-05 15:52:36

@achiash：不客氣。 :) – 2011-04-05 17:26:49

如何使用JQuery將點擊功能分配給多個按鈕？

回答

相關問題