在單個變量中存儲多個選擇器

Question

我有一段代碼可以處理代表按鈕的圖像上的點擊。 如果單擊該圖像，則其對應的圖像將顯示給用戶。 通過選擇圖像的多個ID，以下視頻可以完美運行。

$("#content").on('click','#buttonID1, #buttonID2, #buttonID3, #buttonID4', function(){
    var $varThis = $(this);
    var tmpID = $varThis.prop('id').split('ID')[1];         
    $('#imageID'+tmpID).css({'display': 'block'});
});

但是，我將有很多這些ID可供選擇。 那么是否可以將圖像的#buttonID存儲在單個變量中並將該變量放在.on()方法內？ 他們會被獨立選擇嗎？

下面的代碼不起作用。

var $buttons = $('#buttonID1, #buttonID2, #buttonID3, #buttonID4');
$("#content").on('click',$buttons, function(){
     var $varThis = $(this);
     var tmpID = $varThis.prop('id').split('ID')[1];            
     $('#imageID'+tmpID).css({'display': 'block'});
});

Answer 1

這不是什么課程嗎？ 添加一個類，在所有按鈕中將其稱為myButton ，然后將其用作選擇器。

$("#content").on('click','.myButton', function(){

或者，如果您堅持使用ID，則應該可以使用：

var buttons = '#buttonID1, #buttonID2, #buttonID3, #buttonID4';
$("#content").on('click',buttons, function(){

Answer 2

更改

var $buttons = $('#buttonID1, #buttonID2, #buttonID3, #buttonID4');

To

var $buttons = '#buttonID1, #buttonID2, #buttonID3, #buttonID4';

  $("#content").on('click',$buttons, function(){
        var $varThis = $(this);
        var tmpID = $varThis.prop('id').split('ID')[1];         
        $('#imageID'+tmpID).css({'display': 'block'});
    });

Answer 3

您應該為此使用css attribute-starts-with選擇器：

$("#content").on('click','button[id^="buttonID"]', function(){
 ...
}