2

以下の画像に示すようなことを行うJquery関数があります

1.すべての製品を1ページにリストするdivがあり、興味のある人はティックまたはクロスのいずれかを選択できます。

2.画像​​ 1 の十字をクリックすると、画像 2 のように div が変更されます。

3.画像2の目盛り記号をクリックすると、画像1のようにdivが作成されます（つまり、興味がありますが表示され、記号にのみ十字が表示されます

私は4つの別々の画像を作成し、以下のようにクラスを書きました

.CrossMe
    {
        background : url(CrossMe.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 51px;
    }

    .TickMe
    {
        background : url(TickMe.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 49px;
    }

    .NotInterested
    {
        background : url(NotInterested.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 241px;
    }

    .Interested
    {
        background : url(IamInterested.gif) no-repeat;
        cursor     : pointer;
        float      : left;
        height     : 44px;
        width      : 243px;
    }

以下のようにクラスを変更するJquery

$('document').ready(function(){             
        $('.CrossMe').click(function(){
            $(this).prev().attr('class', 'TickMe');             
            $(this).toggleClass('NotInterested');

            $(this).prev().click(function(){
                $(this).next().attr('class', 'CrossMe');
                $(this).toggleClass('Interested');
            });
        });

        $('.TickMe').click(function(){
            $(this).next().attr('class', 'CrossMe');
            $(this).toggleClass('Interested');

            $(this).next().click(function(){
                $(this).next().attr('class', 'TickMe');
                $(this).toggleClass('NotInterested');
            });
        });
    });

以下のようなHTML

<pre>
<div class="Interested"></div>
<div class="CrossMe"></div>
</pre>

今、私のコードは一度だけ機能しますが、その後は機能していますが、期待どおりではありません。

誰かがこれを修正するのを手伝ってくれますか

同じページに製品を含む複数の div を表示するため、ID を使用しないでください。

前もって感謝します

以下にHTMLコード全体を貼り付けました

<pre>
       <style>
        .CrossMe
        {
            background : url(CrossMe.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 51px;
        }

        .TickMe
        {
            background : url(TickMe.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 49px;
        }

        .NotInterested
        {
            background : url(NotInterested.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 241px;
        }

        .Interested
        {
            background : url(IamInterested.gif) no-repeat;
            cursor       :  pointer;
            float            : left;
            height       : 44px;
            width            : 243px;
        }

        .Button
        {
        cursor  :   pointer;
        }
        </style>
        <script>

        $('document').ready(function(){             
            $('.CrossMe').click(function(){
                    $(this).prev().attr('class', 'TickMe');             
                    $(this).toggleClass('NotInterested');

                    $(this).prev().click(function(){
                        $(this).next().attr('class', 'CrossMe');
                        $(this).toggleClass('Interested');
                    });
            });

            $('.TickMe').click(function(){
                    $(this).next().attr('class', 'CrossMe');
                    $(this).toggleClass('Interested');

                    $(this).next().click(function(){
                        $(this).prev().attr('class', 'TickMe');
                        $(this).toggleClass('NotInterested');
                    });
            });
        });     

        </script>

      <div class="Interested"></div>
      <div class="CrossMe"></div>
</pre>
4

4 に答える 4

2

チェックされていない解決策で申し訳ありませんが、うまくいかない場合は改善を試みます。これを試してください 

$('document').ready(function(){
    var $pre = $('pre');
    $pre.delegate('div.CrossMe', 'click', function(){
        $(this).attr('class', 'TickMe') 
             .prev().attr('class', 'NotInterested');
    });

    $pre.delegate('div.TickMe', 'click', function(){
        $(this).attr('class', 'CrossMe')
             .prev().attr('class', 'Interested');
    });
});

私はvar $pre = $('pre');それがある種の最適化である原因を使用します。<pre>ハンドラーをDOM オブジェクトに 2 回アタッチする必要があります。次の方法で実行できます。

$('pre').someMethod();
$('pre').someMethod();

jQueryしかし、最終的に同じオブジェクトを取得するためにコンストラクターを 2 回呼び出すのはなぜでしょうか? 一度だけ呼び出して変数に保存し、さらに操作することをお勧めします。

私はよく次のようなものを目にします：

$('div').click(function() {
    $(this).methodcall();
    $(this).anotherMethodcall();
    $(this).yetAnotherMethodcall();
});

これは良いアプローチではありません

于 2012-08-17T05:19:44.797 に答える
1

DOMオブジェクトはクリックごとに操作されるため、クリックイベントは実行時に再バインドする必要があります。.on()次の方法を試してみてください。

$('document').ready(function(){             
    $('body').on('click', '.CrossMe', function(){
        $(this).prev().attr('class', 'TickMe');             
        $(this).toggleClass('NotInterested');

        $(this).prev().click(function(){
            $(this).next().attr('class', 'CrossMe');
            $(this).toggleClass('Interested');
        });
    });

    $('body').on('click', '.TickMe', function(){
        $(this).next().attr('class', 'CrossMe');
        $(this).toggleClass('Interested');

        $(this).next().click(function(){
            $(this).next().attr('class', 'TickMe');
            $(this).toggleClass('NotInterested');
        });
    });
});

チェックされていませんが、動作するはずです!!

于 2012-08-17T05:24:18.840 に答える
1

これで問題が解決するかどうかはわかりませんが、これらの状態を CSS で処理する方がコンパクトになる可能性があります。ここに簡単な例をまとめました: http://jsfiddle.net/u7336/。おそらく順序が間違っていると思いますが、各状態の画像を定義するコメントをいくつか追加しました。しかし、あなたはその考えを理解します。

于 2012-08-17T05:19:03.370 に答える
1

以下の jQuery スクリプトを使用します。

$('document').ready(function(){             
    $('.CrossMe').click(function(){
    $(this).toggleClass('TickMe');
    var prevClass = $(this).prev().attr('class');
        if(prevClass=='Interested'){
        $(this).prev().removeClass('Interested').addClass('NotInterested');
        } 
        else{
        $(this).prev().removeClass('NotInterested').addClass('Interested');
        }
    });
    }); ​
于 2012-08-17T05:27:52.467 に答える