Question

我有这样的任务：使用jQuery创建一个函数，它将CSS类更改为选定的DIV。 Class =“XXX”可以重复多次，但Class =“YYY”只能重复一次。

像这样：

<div onclick="change_css()"class="xxx">text</div>
<div onclick="change_css()"class="xxx">text</div>
<div onclick="change_css()"class="xxx">text</div>
<div onclick="change_css()"class="yyy">text</div>
<div onclick="change_css()"class="xxx">text</div>

因此，这意味着函数需要首先找到class =“yyy”并更改为class =“xxx”，然后将类修改为“yyy”，由onclick激活。 ..

请帮助我实现这个功能......我知道我需要以某种方式使用.addClass和.removeClass

function change_css() {
/// some tricks here
}

谢谢你的每一个建议！

Answer 1

我会建议一种不同的，更多的jQuery方法。从所有<div>中删除“onclick”属性，并在所有相关的myDiv上使用另一个类（此示例为<div>）： Here's a working jsFiddle

<div class="myDiv xxx">text</div>
<div class="myDiv xxx">text</div>
<div class="myDiv xxx">text</div>
<div class="myDiv yyy">text</div>
<div class="myDiv xxx">text</div>

然后使用jQuery附加click事件：

$(function(){

    $('.myDiv').click(function(){ // when a .myDiv is clicked
        $('.myDiv.yyy').removeClass('yyy').addClass('xxx'); // replace former yyy with xxx
        $(this).removeClass('xxx').addClass('yyy'); // add class yyy to current element instead of class xxx
    })

})

Answer 2

$('.xxx').on('click', function(){
    $('.xxx').removeClass('yyy');
    $(this).addClass('yyy');
});

Jquery：在多个DIV之间更改CLASS

2 个答案: