1

現在、特定のクラス要素をクリックすると強調表示されるタイムテーブルがあります。画面上の他の場所をクリックすると、強調表示されなくなります。それは完全に機能します。

ただし、クラス要素をクリックしてから同じクラス要素の別のエントリをクリックすると、両方が強調表示されます。それは私のコードの問題ですが、それを変更するには何を修正すればよいかわかりません。

これがJSです（無関係な部分を削除しました）：

$(document).click(function() {  
    $('.outter').css("background-color","rgba(52, 73, 94, 0.8)");
});

$(document.body).on('click', '.outter', function(e) {
    $(this).css("background-color","#000");
});

したがって、基本的には「外部」クラスに影響します。html の例:

<td id="mon-9">
    <p class="outter" style="background-color: rgba(52, 73, 94, 0.8);">
        Programming
        <br/>
        Lecture
    </p>
</td>
<td id="tue-9">
    <p class="outter" style="background-color: rgba(52, 73, 94, 0.8);">
        BPI
        <br/>
        Lecture
    </p>
</td>

したがって、この特定のシナリオでは、これらのいずれかをクリックすると黒く表示され、クリックして離すと通常に戻ります。できます。ただし、一方をクリックしてからもう一方をクリックすると、両方が黒くなります。.outter タブの外側をクリックするまで、通常に戻りません。個別の ID を付与したいのですが、エントリがたくさんあります。それはばかげているでしょう。

私が求めているものを達成するための優れた方法はありますか?

4

1 に答える 1

1

1 つのインスタンスのみを強調表示する場合:

$(document).click(function() {  
    $('.outter').css("background-color","rgba(52, 73, 94, 0.8)");
});

$(document.body).on('click', '.outter', function(e) {
    $('.outter').css("background-color","rgba(52, 73, 94, 0.8)"); //sets all elements to the initial color
    $(this).css("background-color","#000");
});

クリックした要素を変更する前に、すべての要素を初期色に設定するだけです。これは手っ取り早く簡単な方法ですが (推奨されません)、優れた方法ではありません。

于 2013-04-14T07:44:57.363 に答える