javascript - 将多个选择器存储在单个变量中

Question

我有一段代码可以处理代表按钮的图像的点击。如果单击该图像，则其对应的图像将显示给用户。通过选择图像的多个 ID，下面的 vode 可以正常工作。

$("#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(){
 ...
}