Question

我的问题与此有关： 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");
});

他们为每个人引用了一个不同的对象 - 我甚至可以巩固它吗？

谢谢，奥利弗

Answer 1

你可以这样做：

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

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

Answer 2

我认为最好的方法是将数据属性添加到您为每个类使用的参考编号，这样如果您有类似的内容

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

和

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

你可以找到你引用的toggle类：

$('.class1, .class2').click(function (e) {
    $('.' + NAME_OF_REFERENCED_TOGGLE_CLASS + this.data.refId).slideToggle('slow');
})

Answer 3

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

$('.class1').add('.class2').click(function (e) {
    // Do whatever you want
})

Answer 4

<div class='common-class' data-id='1'></div>

$('.common-class').on('click', function() {
    if ($(this).data('id')) { 
        $(".classer" + $(this).data('id')).slideToggle("slow");
    }
});

Answer 5

根据您的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();
});

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

多个元素事件的JQuery单击事件

5 个答案: