ボタンの2回目のクリックを検出する

Question

ボタンのCSSを変更したい。最初のクリックで、2番目のクリックで。 私はこれを持っていますが、動作しません。 .clic-twoを絶対に追加しないでください

$(".prev-next-links li.no-clic").click(function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 

$(".prev-next-links li.clic-one").click(function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

Answer 1

これを行う別の方法は、共通クラスをセレクタとして使用することです。 DOMは動的なので、ユーザインタラクションの後に変更されていないCSSクラスを使用する必要があります。

$(".prev-next-links, .prev-next-links a").click(function() { 
 

 
    if ($(this).hasClass("no-clic")) { 
 
    
 
    $(this).removeClass('no-clic'); 
 
    $(this).addClass('clic-one'); 
 
    } else if ($(this).hasClass("clic-one")) { 
 
    $(this).removeClass('clic-one'); 
 
    $(this).addClass('clic-two'); 
 
    } 
 

 

 

 
});

.prev-next-links { 
 
    font-weight: bold; 
 
} 
 
.no-clic { 
 
    background-color: gray; 
 
} 
 
.clic-one { 
 
    background-color: aqua; 
 
} 
 
.clic-two { 
 
    background-color: lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="prev-next-links no-clic">First 
 
    </li> 
 
    <li class="prev-next-links"><a class="no-clic" href="#">Second</a> 
 
    </li> 
 

 
</ul>

Answer 2

DOMのプロパティが動的であることを意味するクラスを削除/追加しています。そして、動的な要素のために、あなたは仕事にイベント委譲メソッドを使用する必要があります。

$(".prev-next-links").on('click','li.no-clic',function() { 
    $(this).removeClass('no-clic'); 
    $(this).addClass('clic-one'); 
}); 
$(".prev-next-links").on('click','li.click-one',function() { 
    $(this).removeClass('clic-one'); 
    $(this).addClass('clic-two'); 
}); 

はevent delegation詳細については、こちらをご覧ください。

---

しかし、私はそれが二度目にクリックされたかどうかをチェックするためのフラグ変数を設定することをお勧め：toggleClassドキュメント用

var clickedTime = 0; 
$(".prev-next-links li").click(function() { 
    clickedTime++; 
    $(this).toggleClass('click-one',clickedTime % 2 == 0); 
}); 

ルック。

Answer 3

この問題は、ページが読み込まれた後に.clic-oneクラスを動的に割り当てているにもかかわらず、クリックイベントがロードされる前にボタン.click-oneにフックしているために発生します。あなたが委任イベントハンドラを使用する必要があり、この問題を解決するために

：

$('.prev-next-links').on('click', '.no-clic', function() { 
    $(this).toggleClass('no-clic clic-one'); 
}).on('click', '.clic-one', function() { 
    $(this).toggleClass('clic-one clic-two'); 
}); 

はまた別にaddClass()/removeClass()の使用を超えるtoggleClass()への単一の呼び出しに注意してください。