Question

有人可以帮我压缩这个jQuery吗？另外，有没有办法可以将多个$（＆＃39; body＆＃39;）组合在一起（＆＃39;点击＆＃39; ....），这样我只需要运行一次，但是列出该父事件下的多个选择器。

$('body').on('click', '.tab2', function () {
    $('#tab1').removeClass('active');
    $('#tab2').addClass('active');
});
$('body').on('click', '.tab1', function () {
    $('#tab2').removeClass('active');
    $('#tab1').addClass('active');
});

请注意，该事件是一个类，函数内部是ID。这是我正在使用的HTML。

<a class="tab1">Hello</a>
<a class="tab2">World</a>
<div id="tab1" class="active">Something here for #tab1</div>
<div id="tab2">Something else goes here for #tab2</div>
<style>div {display:none;}</style>

Answer 1

如果你有这样的事情：

<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>

你可以这样做：

$('body').on('click', '.tab', function () {
    $('.tab').removeClass('active'); //remove active from all tabs
    $(this).addClass('active'); //add active to clicked tab
});

此外，您可以使用,列出多个选择器以将它们分开。

$（'body'）。on（'click'，'。class，.otherClass'，function（）{

Answer 2

假设您在<a>元素中没有更多类，您可以使用它：

$('body').on('click', function (event) {
    if (!$(event.target).is('[class^=tab')) return
    $('div[id^="tab"]').removeClass('active');
    $('#' + event.target.className).addClass('active');
});

Demo

Answer 3

<div class="tab1">Content 1</div>
<div class="tab2">Content 2</div>
<div class="tab1">Content 1</div>
<div class="tab2">Content 2</div>

和Jquery ......

$('body').on('click', '.tab1, .tab2', function () {
    $('.tab1, .tab2').removeClass('active'); //remove active from all tabs
    $(this).addClass('active'); //add active to clicked tab
});

JSFiddle

你也可以使它更加浓缩......即：假设“身体”，所以......

$('.tab1, .tab2').click( function () {
    $('.tab1, .tab2').removeClass('active'); //remove active from all tabs
    $(this).addClass('active'); //add active to clicked tab
});

JSFiddle 2

压缩jQuery委托代码

3 个答案:

Demo