jquery - Jquery：在多个 DIV 之间更改 CLASS

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>

因此，这意味着 Function 需要首先找到 class="yyy" 的位置并更改为 class="xxx"，然后将类修改为由onclick...激活的 "yyy"

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

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

谢谢你的每一个建议！

Answer 1

我会建议一种不同的、更多的 jQuery 方法。从所有 s 中删除“onclick”属性并在所有相关 s 上<div>使用另一个类（myDiv对于本示例）<div>：这是一个工作 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 附加点击事件：

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