jQuery

ボタンをクリックしたときのjQueryメモ

自分用覚書です。

イベントメソッドのブックマーク

参考:イベントに応じて処理を実行するには?(イベントメソッド)

クラスを付けたり消したりする際に利用するのはtoggleClass

参考:toggleClass(class)

指定した要素から、CSSクラスを削除するにはremoveClass

参考:removeClass(class)

ボタンAをクリックしたときにactiveクラスを追加して、
ボタンBをクリックしたときにactiveクラスを追加して且つボタンAのactiveクラスを削除する…みたいな
this以外の動きもjQueryで制御?できるメモ。

ボタンの設定

<input type="button" class="btn-A" value="A">
<input type="button" class="btn-B" value="B">
<input type="button" class="btn-C" value="C">
<input type="button" class="btn-D" value="D">

jQuery側

$('[class^="btn-"]').on("click",function(){ 
   $(this).toggleClass('active'); //this
   var self = $(this);
   $('[class^="btn-"]').not(self).removeClass('active'); //this以外
})

参考:jQuery $(this)以外のセレクタの指定方法

  • この記事を書いた人

ゆず

■忘れないように自分の覚書と、誰かも困っているかもしれないので参考になればいいなくらいの軽い備忘録です。
■サイト運営費のためGoogleAdsenseをいれています。
gifteeを贈る / コーヒーをおごる / mail

1

outlookを最小化すると勝手に終了してしまう outlookを最小化すると勝手に終了してしまうと相談されたけど実はそれ勝手に閉じてるわけじゃなくて、おそらく「最小化時にアイコン化する設定」になって ...

2

前提 自分用ブックマークサイトとして使用しているてがろぐに、いいねボタンをつけようという狙いです。なので、てがろぐのセットアップは終了し稼働しているものとします。 配布ページのマニュアルを参考に進めま ...

3

感想をもっと手軽に、お気軽に。 https://labo.01kawa.com/kansou 素敵なフォロー、フォロワー、創作作家さんに作品の感想を送りたい…!が、語彙力がないという方向けの感想メーカ ...

-jQuery