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

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

3 个答案: