2

大家好，我已经学习 jquery 大约 3 个月了，但我无法弄清楚这一点。

我要做的是通过单击更改 div (.box) 的背景。我知道如何单击一次，但我不知道如何在不同的单击时更改背景颜色。我想实现某种 if 语句，如果当前类的背景==red 而不是单击使新的当前类变为黄色。在此示例中，我无法将背景颜色变为黄色，并且我真的希望在第三次单击 div 时变为黄色。将来我喜欢第四次点击创建另一个背景颜色。

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

     <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
     <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background-color:green;
        }
        .red{
                width:200px;
            height:200px;
            background-color:red;
        }
        .yellow{
            width:200px;
            height:200px;
            background-color:yellow;
        }
     </style>
    <script type="text/javascript">
        $(document).ready(function(){
        $('.box').click(toRed)
        function toRed(e){
            $(this).addClass('red');
        }
        if($('this').hasClass('red')){
            $(this).removeClass('red')
            .addClass('yellow');
        }

            });

    </script>
    </head>
    <body>
   <div class="box"></div>
    </body>
    </html>

所以总而言之，当我多次单击它时，我基本上试图将 div 的背景颜色更改为每次不同的不同颜色。为什么我的代码不起作用。

感谢您阅读并提前感谢您的回复。

4

3 回答 3

0

您是否正在寻找类似jsFiddle 示例的内容？

$('.box').click(toRed)
function toRed(e) {
    if ($(this).hasClass('red')) {
        $(this).removeClass('red').addClass('yellow');
    }
    $(this).addClass('red');
}​
于 2012-09-12T19:43:17.893 回答
0

从我收集到的问题中，最基本、最简单的概念是这样的：

$('.box').click(function()
{
    if($(this).hasClass('red'))
    {
        $(this).removeClass('red').addClass('blue');
    }
    if($(this).hasClass('blue'))
    {
        $(this).removeClass('blue').addClass('black');
    }
    if($(this).hasClass('black'))
    {
        $(this).removeClass('black').addClass('white');
    }
    if($(this).hasClass('white'))
    {
        $(this).removeClass('white').addClass('red');
    }
});

然而，让大家知道，您可以使用一些方法来使这更加精细、更加复杂，并且这样做更加智能。但我不知道您的需求有多精细，也不知道是否需要更精细的东西。它绝对不是最优化的处理方式，但它应该可以在所有地方工作。

于 2012-09-12T19:44:08.617 回答
0

你可以为多种颜色做这样的事情。只需向数组中添加更多颜色类（此处为 jsFiddle）：

​$(function() {
    var colors = ["green","red","yellow"];

    $(".box").click(function(e) {
         var oldIndex = $.data(this, 'color-index') || 0, 
             newIndex = (oldIndex + 1 < colors.length ? oldIndex + 1 : 0);

        $(this).removeClass(colors[oldIndex]).addClass(colors[newIndex]);
        $.data(this, 'color-index', newIndex);
    });
});​
于 2012-09-12T19:51:11.357 回答