Question

我有多个包含相同类的div，在有人点击其中一个div之后，我想执行两个操作 -

将类“ABC”添加到单击的div中将类“DEF”添加到包含相同类的所有其他div 示例 -

<div class="ZZZ"></div>
<div class="YYY"></div>
<div class="YYY"></div>
<div class="YYY"></div>
<div class="ZZZ"></div>

如果有人点击第二个div，结果应如下所示 -

<div class="ZZZ"></div>       
<div class="YYY ABC"></div>   <--clicked
<div class="YYY DEF"></div>   
<div class="YYY DEF"></div>
<div class="ZZZ"></div>

如何使用JQuery实现这一目标？

谢谢！

Answer 1

试试这个未经测试的代码：

$('div').on('click', function(e){
    e.preventDefault();
    // Find current class of clicked div, remove classes ABC and DEF,
    // store it in currentClass variable
    var currentClass = $(this).attr('class').replace('ABC', '').replace('DEF', '').trim();
    // remove classes ABC and DEF from all other divs:
    $('div').removeClass('ABC').removeClass('DEF');
    // add class DEF for all divs with selected current class
    $('.' + currentClass ).addClass('DEF');
    // for selected element remove class DEF and add class ABC
    $(this).removeClass('DEF').addClass('ABC');
});

Answer 2

你可以这样做，

$('div').click(function() {
    $('div').removeClass('ABC').removeClass('DEF');

    var selection = $(this).attr('class');

    $(this).addClass('ABC');
    $(this).siblings('.' + selection).addClass('DEF');
});

请参阅示例：https://jsfiddle.net/otps7sfa/

Answer 3

这个怎么样（完全未经测试）？

$('.YYY').click(function (e) {
    e.preventDefault();
    $('.YYY').removeClass('ABC').addClass('DEF');
    $(this).addClass('ABC');
});

Answer 4

首先，您需要为所有div提供一个公共属性。即

<div class="rrr ZZZ"></div>
<div class="rrr YYY"></div>
<div class="rrr YYY"></div>
<div class="rrr YYY"></div>
<div class="rrr ZZZ"></div>

我给了所有div的课'rrr'。现在让我们编写jquery

$('.rrr').click(function (e) {
    var classn = $(this).attr('class').replace('rrr ', '');
    $('.' + classn).addClass('DEF');
    e.preventDefault();
    $(this).removeClass('DEF').addClass('ABC');
});

我希望你理解这个流程。它会帮助你

使用JQuery选择和更改具有相同类的其余元素

4 个答案: