1

私はjQueryゲームに取り組んでいます。div2x2 デザインに4 s があります。プレーヤーは 1 つのオプションを選択し、別のボタンで確認する必要があります。問題は、不透明度の低い背景を変更するクラスを追加するホバー効果と、不透明度の高い背景を設定するクリック効果があります。divs 2、3、および 4 では問題なく動作します。ホバーすると背景の色が不透明度 0.3 で変わり、マウスを離すと白に戻ります。クリックすると、背景が 0.4 に変更され、ホバーはそれらに影響しなくなります。ただし、これは最初のdivでは機能しません。divホバーすると背景色が変わりますが、クリックするとホバーの色が保持され、マウスを離すとクリックの色が表示され、ホバーするたびにホバーが変わります再び色を付けます。

div 1 でのみ発生するのはなぜですか?

コード：

//hover effects
$(".respuesta1,.respuesta2,.respuesta3,.respuesta4").hover(

function () {
    $(this).addClass("respuestahover");
},

function () {
    $(this).removeClass("respuestahover");
});

//on click function for div1        
$(".respuesta1").on("click", function () {
    //if it hasnt been clicked, toogle class and change var to true
    if (prendido1 == false) {
        $(this).toggleClass("respuesta1b");
        prendido1 = true;

        //if any of the other divs are clicked by the time you are clicking unclicked 1, turn them off
        if (prendido2 == true) {
            $(".respuesta2").toggleClass("respuesta2b");
            prendido2 = false;
        }
        if (prendido3 == true) {
            $(".respuesta3").toggleClass("respuesta3b");
            prendido3 = false;
        }
        if (prendido4 == true) {
            $(".respuesta4").toggleClass("respuesta4b");
            prendido4 = false;
        }
        //if is already clicked, turn off and change var to false
    } else {
        $(this).toggleClass("respuesta1b");
        prendido1 = false;
    }
});

最後の部分は、div "respuesta2"、"respuesta3" などごとに繰り返されます。

何か案が？

編集

jsFiddle を作成するためにコードをクリーンアップしようとしていましたが、動作するようになったと思います。

http://jsfiddle.net/bqySN/2/

誰かが興味を持っている場合は、コードをそのままにしておきます。コードは洗練されておらず、さらに一般化する必要があることに注意してください。

編集2

いくつかのテストの後、私は実際に問題を発見しました：

css クラスの順序を変更すると、アプリが狂ってしまいます。

これは正しいです。最初にホバーします

.respuestahover{
    background-color:#f00;
    opacity:0.2;
}

.respuestab{
    background-color:#f00;
    opacity:0.5; 
}

これは間違っています。

.respuestab{
    background-color:#f00;
    opacity:0.5;
}

.respuestahover{
    background-color:#f00;
    opacity:0.2;
}

なぜそのように振る舞うかはよくわかりませんが、理解できてうれしいです。

4

2 に答える 2

0

バインディングを単純化して、それらをもう少し一般的にターゲットにしてから、それらすべてのホバー クラスを削除する必要があります。

$(".respuesta").on("click", function (index) {
  $(this).removeClass("hover");
  // do other things
});

リストにある場合は、インデックスを使用して番号を見つけることもできます。

ホバーがクリックをオーバーライドしないようにする場合は、クリックにアクティブなクラスを与え、ホバーにそれら以外のすべてで動作するように指示します。

$('.respuesta:not(.active)').hover(function() {
  // do something
}
于 2013-08-08T17:46:11.743 に答える