JQuery一键事件多元素事件答案

【问题标题】：JQuery one click event for multiple element eventsJQuery一键事件多元素事件
【发布时间】：2013-03-10 05:05:39
【问题描述】：

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

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

谢谢，奥利弗

【问题讨论】：

可以，但根据 html 结构，可能有更好的方法。

标签： jquery

【解决方案1】：

你可以这样做：

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

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

【讨论】：

选择一个答案几乎感觉不公平，因为它们都很棒，但我喜欢这个主意！谢谢！

【解决方案2】：

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

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

【讨论】：

这到底是怎么回答这个问题的？
如果他使用this，他可能会引用他点击的对象？

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

您应该将 e 放在 function() 中的位置
但是 OP 想要切换其他元素，而不是点击的元素。 .class1 与 .classer1
正是 j08691 - 这是我正在努力解决的部分 - 切换多个项目。或者这可能与目标，我不明白？
抱歉，我看错了里面的内容。我认为我更新的答案应该会有所帮助。

【解决方案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();
});

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

【讨论】：