如何結合具有連續ID的元素的功能

對不起，如果標題混亂，我想不出更好的東西。基本上，我想要做的是直截了當。這是我的代碼如何結合具有連續ID的元素的功能

jQUery('.button1').click(function() { 
    jQuery(".box1").slideUp(); 
    jQuery(this).remove(); 
}); 
jQUery('.button2').click(function() { 
    jQuery(".box2").slideUp(); 
    jQuery(this).remove(); 
}); 
jQUery('.button3').click(function() { 
    jQuery(".box3").slideUp(); 
    jQuery(this).remove(); 
});

等等.... 現在這幾乎是一個爛攤子，當我有更多的箱子。有什麼辦法可以將它們全部結合起來讓jquery做ID號碼嗎？

來源

2012-06-04 rzr

你的代碼沒有引用jquery選擇器。 –

您可以爲按鍵設置類名（如"buttons"），並使用ID：

<button id="button1" class="buttons">Delete</button>

然後，你可以做一些技巧從ID中得到號碼：

$(".buttons").on("click", function() { 
    var n = this.id.replace("button", ""); 
    $(".box" + n).slideUp(); 
    $(this).remove(); 
});

DEMO：http://jsfiddle.net/DXzKu/

來源

2012-06-04 15:00:41 VisioN

+1，因爲每次添加新按鈕/框時不需要更新js。您只需確保按鈕上有'buttons'類，並且按鈕和框之間的數字相匹配。 – lbstr

像魅力一樣工作！謝謝:) – rzr

@t_virus：歡迎您:) – VisioN

您可以在一個選擇將它們組合起來：

jQUery('#button1, #button2, #button3')...

來源

2012-06-04 14:59:05

但後來我想單擊任何這些按鈕將關閉所有的框：| – rzr

如果您在點擊處理程序中使用'$（this）'，該函數將只應用於當前單擊的元素。 –

這不會使「.box」鏈接。 –

for (var i=1; i<=3; i++) { 
    $('.button'+i).click(function() { 
     $(".box"+i).slideUp(); 
     $(this).remove(); 
    }); 
}

來源

2012-06-04 14:59:13

屬性開始，與選擇（'^ =）會爲你的ID的工作，像這樣：

$('[class^="button"]').click(function() { 
    //do stuff 
});

您可以從點擊的元素和表演獲得數/隱藏框。

來源

2012-06-04 15:02:00

嘗試像下面，

for (var i = 1; i <= 3; i++) { 
    jQUery('.button'+i).click({ i: i }, function(e) { 
    jQuery(".box"+ e.data.i).slideUp(); 
    jQuery(this).remove(); 
    }); 
}

但隨着一些標記改變，我們可以做得更好。

來源

2012-06-04 15:02:03

如何結合具有連續ID的元素的功能

回答

相關問題