多元素事件的JQuery单击事件

Question

我的问题与这个有关： jQuery同一点击事件适用于多个元素

然而，当我执行以下操作时：

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

我经常使用相同的函数并针对同一对象。例如，如果我想要合并以下两个语句:

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

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

它们分别引用不同的对象 - 我能合并它们吗？

谢谢， Oliver

- oliver13

---

你可以这样做，但根据HTML结构，可能有更好的方法。 - Kevin B

Answer 1

你可以这样做：

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

只要你点击的元素只有一个类，就可以实现。这会从被点击的元素中提取整数，并将其附加到.classer中。因此，点击.class2将触发.classer2的切换。

- j08691

---

几乎觉得不公平只选择一个答案，因为它们都很棒，但我喜欢这个想法！谢谢！ - oliver13

Answer 2

我认为最好的方法是给你用于每个类别的引用编号添加一个数据属性，这样如果你有像这样的东西：

和

你可以通过以下方式找到相应的切换类别：

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

- acconrad

---

你应该将e放在function()中的正确位置。 - Mark Schultheiss

但是OP想要切换其他元素，而不是点击的那些元素。.class1与.classer1。 - j08691

确切地说，j08691 - 这就是我正在努力解决的问题 - 切换多个项目。或者这可以通过目标实现，而我没有理解吗？ - oliver13

啊，抱歉我之前理解错了里面的内容。我认为我更新后的答案应该能帮上忙。 - acconrad

Answer 3

你可以看看add()方法。使用它将选择器添加到选择堆栈中，像这样使用：

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

- Ahmad Alfy

---

这怎么回答问题了呢？ - j08691

也许如果他使用了 this，他就可以引用他所点击的对象？ - Ahmad Alfy

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");
    }
});

- pdoherty926

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>

you could use:

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

使用单个点击事件处理两个列表。

- Kevin B