W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:z3v0j4 さんの質問

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 件

ID:6G0Rmn さんの回答

$(".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/
ID:z3v0j4

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

ID:KX7imV さんの回答

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

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

});

ID:z3v0j4

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

ID:KX7imV

じゃあtoggleClass。

ID:arFm9W さんの回答

toggleClassをつかえばいいじゃないのか?

toggleClass(class) - jQuery 日本語リファレンス

http://semooh.jp/jquery/api/attributes/toggleClass/class/
ID:z3v0j4

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

ID:UqEWtF さんの回答

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

ID:z3v0j4

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

ID:UqEWtF

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

ID:nz/lM4

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

最終更新日:2015-12-09 (10,637 views)

関連するトピックス

ページ上部に戻る