Question

有人可以帮我解决这个问题，我希望能够在点击一堆列表项时更改正文的背景。正文本身总是有两个无法删除的类。

HTML：

<body class="bodyclass1 bodyclass2">

    <ul>
        <li class="red"><div class="colorme">red</div></li>
        <li class="blue"><div class="colorme">blue</div></li>
        <li class="green"><div class="colorme">green</div></li>
        <li class="brown"><div class="colorme">brown</div></li>
    </ul>

</body>

的CSS：

body.red{
    background: red
}

body.blue{
    background: blue
}

body.green{
    background: green
}

body.brown{
    background: brown
}

JQuery的：

<script language="javascript">

$.noConflict();
    jQuery( document ).ready(function( $ ) {


        $( ".colorme" ).on('click',function(){


            var allKleur = $('.red, .blue, .green, .brown');
            var colorDad = $(this).parents('li:eq(0)').attr('class');

            $('body').removeClass(allKleur).addClass(colorDad);
        });

    });
</script>

这段代码会发生什么？ti会从单击的父项的变量中添加该类，但它不会删除这些类，只留下被点击的类。

它确实以这种方式工作：

$('body').removeClass().addClass(colorDad);

但随后它删除了body标签已经拥有的所有类，并且不应删除哪些类。

非常感谢任何正确方向的帮助，谢谢。

Answer 1

removeClass（）需要一个字符串，而不是一个jQuery对象。请尝试以下方法：

var allKleur = 'red blue green brown';

修改：添加了改进

<script language="javascript">

    $.noConflict();
    jQuery( document ).ready(function( $ ) {

        var allKleur = 'red blue green brown';
        var $body = $('body');

        $( ".colorme" ).on('click',function(){

            $body.removeClass(allKleur).addClass( $(this).data('class') );

        });

    });
</script>

我做了一些小改进：

在click事件之外移动了allKleur和$ body vars，因为每次点击都不需要重新声明
我建议在colorme div上添加一个data-class属性。这样您就不需要调用parents（）方法，并且您不依赖于父类li的类，这可能会改变。

Answer 2

顺便说一句，你可以这样做：

 $( ".colorme" ).on('click',function(){

            var toAddClass=$(this).parent().attr('class');              
            $('body').removeClass('red blue green brown').addClass(toAddClass);
        });

Answer 3

test the demo 就像有人告诉你的那样..使用

 $('.colorme').on('click',function(){
        alert('clicked');
            var toAddClass=$(this).parent().attr('class');              
        $('body').removeClass('red blue green brown').addClass(toAddClass);
 });

删除/添加填充在变量jquery中的多个类

3 个答案: