3

我的问题与此有关： jQuery same click event for multiple elements

但是，当我这样做时：

$('.class1, .class2').click(function() {
   some_function();
});

我总是对同一个对象使用同一个函数。例如，如果我想合并以下两个语句怎么办：

$(".class1").click(function () {
  $(".classer1").slideToggle("slow");
});

$(".class2").click(function () {
  $(".classer2").slideToggle("slow");
});

他们为每个引用一个不同的对象-我什至可以合并它吗？

谢谢，奥利弗

4

5 回答 5

5

你可以这样做：

$(".class1, .class2").click(function () {
  $(".classer"+$(this).attr('class').substr(-1)).slideToggle("slow");
});

只要您单击的元素只有一个类。这会将整数从被单击的元素中拉出并将其附加到.classer. 所以点击.class2会触发切换.classer2。

于 2013-03-20T21:17:34.563 回答
2

我认为最好的方法是为每个类使用的参考号添加一个数据属性，所以如果你有类似的东西

<div class="class1" data-ref-id="1"></div>

和

<div class="class2" data-ref-id="2"></div>

您可以像这样找到引用的切换类：

$('.class1, .class2').click(function (e) {
    $('.' + NAME_OF_REFERENCED_TOGGLE_CLASS + this.data.refId).slideToggle('slow');
})
于 2013-03-20T21:14:45.057 回答
2

您可能想看看add()。使用它将选择器添加到选择堆栈。像这样使用它：

$('.class1').add('.class2').click(function (e) {
    // Do whatever you want
})
于 2013-03-20T21:17:45.603 回答
2 
<div class='common-class' data-id='1'></div>

$('.common-class').on('click', function() {
    if ($(this).data('id')) { 
        $(".classer" + $(this).data('id')).slideToggle("slow");
    }
});
于 2013-03-20T21:18:10.487 回答
1

根据您的html，根据元素位置进行选择可能会更好。例如，如果这是您的 html：

<dl class="class1 list">
    <dt>Foo</dt>
    <dd>Foobar</dd>
    <dt>Dog</dt>
    <dd>Pitbull</dd>
</dl>
<dl class="class2 list">
    <dt>Foo</dt>
    <dd>Foobar</dd>
    <dt>Dog</dt>
    <dd>Pitbull</dd>
</dl>

你可以使用：

$(".list dt").click(function(){
    $(this).next("dd").slideToggle();
});

通过单击事件处理两个列表。

于 2013-03-20T21:23:22.603 回答