Question

我正在尝试制作一个按钮，使背景颜色从白色变为黄色，再次单击该按钮时，它会变回白色。我正在使用Jquery来实现这一点，但是在执行循环函数时我遇到了问题。我有一个JSfiddle设置与我在下面的相同代码。 JSFIDDLE

----- HTML -----

<html>
    <head></head>
    <body>
            <div class="button"></div>
    </body>
</html>

---- CSS ----

.button {
    background-color: #00ccff;
    width: 250px;
    height: 250px;
    border-radius: 25%;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
}

.body{
    background-color: white;
}

---- JQUERY ----

$(document).ready(function () {
    var click = false;
        (function loop(){
        if ('click = false') {
            $('.button').click(function () {
                $('body').css("background-color", "yellow");
                click = true;
            });
        } else {
            $('.button').click(function () {
                $('body').css("background-color", "white");
                click = false;
            });
        }
        })();
});

Answer 1

$(document).ready(function () {
    var click = false;

            $('.button').click(function () {
               if(click == false){
                $('body').css("background-color", "yellow");
                click = true;
               }else{
              $('body').css("background-color", "white");
                click = false;
               } 
            });         
});

Answer 2

$(document).ready(function () {
    var isWhite = true;
    $(".button").click(function() {
        $('body').css("background-color", (isWhite = !isWhite) ? "white" : "yellow");
    });
});

Answer 3

试试这段代码，它可以让你添加任意数量的颜色（demo）：

$(document).ready(function () {
    var bg = 0,
        colors = ['yellow', 'white'],
        len = colors.length;
    $('.button').click(function () {
        $('body')
            .removeClass(colors.join(' '))
            .addClass(colors[bg++ % len]);
    });
});

Answer 4

只需复制并粘贴并查看我为您工作的这个例子，我使用了切换效果并更改了您的一些代码：

<html>
    <head>
    <style>
    .button {
    background-color: #00ccff;
    width: 250px;
    height: 250px;
    border-radius: 25%;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">
</script>


    </head>
    <body>
            <div class="button" id="kot"></div>
            <input type="button" value="Button" class="thebutton">
            <script>
            $(document).ready(function(){
                  $(".thebutton").toggle(
                    function(){$("#kot").css({"background-color":"red"});},
                    function(){$("#kot").css({"background-color":"blue"});},
                    function(){$("#kot").css({"background-color":"green"});
                  });
                });
            </script>
    </body>
</html>

如何重复使用Jquery循环代码

4 个答案: