2

誰かが私のコードを改善できるかどうか知りたいです... jQueryを使用して、クリックするだけで要素にクラスを適用し、他の要素でこのクラスを無効にしようとしています。

クリックしたばかりの要素にクラスを適用し、他の要素のすべてのクラスを削除しようとしていることがコードでわかります。

しかし、今のところ、$("choice1-1").click(function()でわかるように、「簡単で非常に長い道のり」を行っています。

他のすべての ID を検出できるコードを教えてもらえますか?

ここで私のコードは今のところ

$(document).ready(function() 
{
    $('#stick-question-1').mouseenter(function() 
    {
        $('#stick-choices-1').show();

    });

    $('#stick-choices-1').mouseleave(function() 
    {
        $('#stick-question-1').show();
        $('#stick-choices-1').hide();
    });


    $("choice1-1").click(function()
    {
        $(this).addClass('hover-etat');
        $("#choice1-2").removeClass('hover-etat');
        $("#choice1-3").removeClass('hover-etat');
        $("#choice1-4").removeClass('hover-etat');
    });

});

そして、私のHTMLはこのようなものです

    <div id="stick-choices-1" class="stick-choices">
        <a href="#" onclick="displayChoice1('Under 3\'9'); return false;" id="choice1-1">Under 3'9</a>
        <a href="#" onclick="displayChoice1('4\' to 5\'2'); return false;" id="choice1-2">4' to 5'2</a>
        <a href="#" onclick="displayChoice1('5\'3 to 5\'7'); return false;" id="choice1-3">5'3 to 5'7</a>
        <a href="#" onclick="displayChoice1('5\'8 and more'); return false;" id="choice1-4">5'8 and more</a>        
    </div>
4

6 に答える 6

3

使用するだけです：

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $('.hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

click要素内のリンクのいずれかをクリックするとイベントがトリガーされるように、初期セレクターを変更しました。リンク#stick-choices-1 divをクリックするデフォルトのアクションを防止し (デフォルトを停止したい場合)、hover-etat任意のクラスからクラスを削除します。そのクラスを持つ要素を作成し、そのクラス名をthis要素に適用します。

hover-etatただし、jQuery がクラスを持つ要素を検索する範囲を、#stick-choices-1ドキュメント全体ではなく、同じ要素内の要素に制限することは理にかなっている場合があります。

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $('#stick-choices-1 .hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });

または：

$("#stick-choices-1 a").click(
    function(e) {
        e.preventDefault();
        $(this).siblings('.hover-etat').removeClass('hover-etat');
        $(this).addClass('hover-etat');
    });
于 2012-04-19T16:26:05.090 に答える
0

このクリック イベントは、すべての選択肢に対して機能します。

$('.stick-choices a').click(function(e){
    $(this).siblings('.hover-etat').removeClass('hover-etat');
    $(this).addClass('hover-etat');
});
于 2012-04-19T16:29:11.660 に答える
0 
$('div.stick-choices a').on('click', function(e) {
   e.preventDefault();
   $(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});
于 2012-04-19T16:29:49.663 に答える
0

$("a", $("#stick-choices-1")).click(関数(){

   $(".hover-etat").removeClass('hover-etat');
   $(this).addClass('hover-etat');

});

このようなものでしょうか？

于 2012-04-19T16:29:57.773 に答える
0

それはうまくいきます：

$("#choice1-1").click(function(){
    $(".stick-choices a").each(function(){
            $(this).removeClass(".hover-etat");
    });
    $(this).addClass(".hover-etat");
});
于 2012-04-19T16:27:07.137 に答える
0

これにより、すべてのリンクに対してこのハンドラーが登録されます。

$('#stick-choices-1 > a').click(function(ev) {
    $(this).addClass('hover-etat').siblings().removeClass('hover-etat');
    ...
});

.siblings()を使用して、同じグループ内のリンクのみが影響を受けるようにし、クリックされたリンクに不要なクラス変更を送信しないように注意してください。

于 2012-04-19T16:28:45.470 に答える