ID:z3v0j42qDRZw さんの質問

6,333 views

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が切り替わらないです。書き方が間違っているのでしょうか?

登録日:2015-12-09 · カテゴリー:JavaScript・jQuery

みんなの回答 4 件

2015-12-09 · ID:6G0RmnwL.SKN 報告

$(".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/
2015-12-09 · トピ主 報告

詳しくありがとうございます。ドキュメントを読みます。

2015-12-09 · ID:KX7imVYGenAj 報告

そんなややこしことせずに、

$(".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");
}

});

2015-12-09 · トピ主 報告

これだと1つのタグに2つのclassを書かなきゃいけないと思います。
<div class="btn open">クリック</div>
出来れば1つで実現したいのです。

2015-12-10 · コメ主 報告

じゃあtoggleClass。

2015-12-09 · トピ主

toggleClassは思いつきませんでした。ありがとうございます。

2015-12-09 · ID:UqEWtFq/4gkh 報告

これかな
<div class="view open">クリック</div>
$(".view").on("click",function(){
$(this).toggleClass("open close");
});

2015-12-09 · トピ主 報告

class指定は出来れば1つで実現したいのです。

2015-12-10 · コメ主 報告

質問の程度からして、おそらくは素人さんとお見受けしますが、素人さんがおっしゃることは、経験上、固定観念によって発生する制限が間違っている場合が多いです。今回の場合は「class指定は出来れば1つで実現したい」の部分です。そもそもその制限は必要ないのではないかというのが大方の見方だと思いますよ。もっとも、こちらは最初のコードに合わせて書いただけなので、例のようなコードは一般的ではないと思います。やるならこんな感じでしょう。
<div class="view">クリック</div>
$(".view").on("click",function(){
$(this).toggleClass("open");
});
つまり、cssの指定は、openに対してのスタイルだけで十分なはずです。結果としてご要望の1クラスでまとめられているとは思います。jqueryにしても、cssにしても、クラス以外で要素指定ができるので、クラスを一切使わずに実現することもできるのですが、なぜ1クラスにこだわるかは不明なので、回答が最適解かどうかはわかりません。

2015-12-11 · ID:nz/lM4esvdTL 報告

横だけど、要件に対して素人か否かって関係あるのか?長々と書いてるけど、結局は他の人がコメントしているtoggleClass使う方法だし、上から目線の意味が分からん。

回答の受付は終了しました。

関連トピック