jQueryでクリックしたらONの画像、もう一度クリックしたらOFFの画像に切り替わるようにしたいと思っています。画像はCSSで適用します。
// HTML(初期状態はON)
<div class="open">クリック</div>
// jQuery
$(".open").on("click", function() {
$(this).addClass("close");
$(this).removeClass("open");
});
$(".close").on("click", function() {
$(this).addClass("open");
$(this).removeClass("close");
});
としているのですが、1回目の切り替えはできるものの、もう一度クリックしてもclassが切り替わらないです。書き方が間違っているのでしょうか?
みんなの回答 4 件
$(".open").on(...)という書き方は、そのときopenクラスがついていた要素に対してイベントハンドラを付加するものです。
$(".close").on(...)も同様です。
これらはページが読み込まれた瞬間に実行されるので、初期状態がONということは、その瞬間に.closeがついている要素は存在しないので、2番目のイベントハンドラ(OFFのやつをONにする処理)は付加されません。
ONからOFFに切り替わるのにOFFからONに切り替わらないのはこのためです。
修正するには、delegated eventとして扱うようにするのがよいでしょう。詳しい方法はリンク(jQueryのドキュメント)を参考にしてください。
.on() | jQuery API Documentation
http://api.jquery.com/on/そんなややこしことせずに、
$(".btn").on("click", function() {
var _class = $(this).attr("class");
if(_class == "close"){
$(this).addClass("open");
$(this).removeClass("close");
}else{
$(this).addClass("close");
$(this).removeClass("open");
}
});
toggleClassをつかえばいいじゃないのか?
toggleClass(class) - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/attributes/toggleClass/class/これかな
<div class="view open">クリック</div>
$(".view").on("click",function(){
$(this).toggleClass("open close");
});
関連するトピックス