2

我想要类似的东西

$('#el1').bind({
    click,function(e){
        alert('clicked on el1');
    },
})
$('#el2').bind({
    click,function(e){
        alert('clicked on el2');
    },
})

使用 'on' 时。我正在寻找类似的东西：

$(document).on({
    click:'el1',function(e){
        alert('clicked on el1');
    },
    click:'el2',function(e){
        alert('clicked on el2');
    }
})

这不起作用。

[编辑]
我想我需要更清楚。不同的功能没有共同点。可能这样的事情会做：

$(document).on({
    click:'el1',function(e){
        alert('clicked on el1');
    },
    click:'el2',function(e){
        $('body').css('background-color','green');
    }
})

我目前看到使用switch case解决方案最接近我正在寻找的解决方案。

4

4 回答 4

3

如果您的处理程序函数不相关，请不要尝试将它们粉碎成一个。可读性会受到影响。

相反，要清楚并单独附加您的处理程序。

$('#el1').click(function() { ... });
$('#el2').click(function() { ... });

这可以立即识别为两个独立的、不相关的功能。将来，维护和修改此代码会更容易。对您的代码不熟悉的人不必学习古怪的约定；这就是 jQuery 应该如何工作的。

$('#el1,#el2').click(function() {
    switch (this.id) {
        case 'el1': ... break;
        case 'el2': ... break;
    }
});

嗯。

于 2012-05-08T17:43:48.597 回答
2

选择器可以在方法调用中设置：

$("body").on("click", "#el1, #el2", function(){
alert("clicked on " + $(this).attr("id"));
});
于 2012-05-08T17:15:12.043 回答
2

您可以组合选择器，或使用通用模式，并$.on针对它们使用：

$("body").on("click", "[id^='el']", function(){
  switch ( this.id ) {
    case "el1" :
      /* Do el1 stuff */
      break;
    case "el2" :
      /* Do el2 stuff */
  }
});

演示：http: //jsbin.com/asoqoz/edit#javascript,html

于 2012-05-08T17:15:33.757 回答
0

为元素使用一个类，而不是在所有 DOM 中搜索。

<div id="el1" class="someClass"></div>
<div id="el2" class="someClass"></div>

$('.someClass').on('click', function(){
    alert("Clicked on " + this.id);
});
于 2012-05-08T17:18:59.607 回答