2

こんにちは、私はjqueryを約3か月間学んでいますが、これを理解することはできません.

私がやろうとしているのは、クリックして div (.box) の背景を変更することです。ワンクリックでそれを行う方法は知っていますが、別のクリックで背景色を変更する方法がわかりません。現在のクラスの背景が==赤の場合、クリックよりも新しい現在のクラスを黄色にするというifステートメントのようなものを実装したいと思います。この例では、背景色を黄色にすることができず、div の 3 回目のクリックで黄色になりたいと思っています。将来的には、4回目のクリックで別のbackgroundColorを作成するのが好きです。

 <!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を複数回クリックすると、divの背景色を毎回異なる色に変更しようとしています。そして、なぜ私のコードが機能しないのですか。

読んでいただきありがとうございます。事前にご回答いただきありがとうございます。

4

3 に答える 3

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 に答える
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 に答える