JavaScript 備忘録 | メシのタネ

jQuery11
このエントリーをはてなブックマークに追加

今日から役立つjQueryの小技!クリックされた奴をどうにかする方法

 2015/01/30

正直こんな大げさなタイトルつけなくてもイベントの拾い方で良いんですけどね、こういうタイトルにしないと誰も見ないんですよ。イベントの拾い方とかタイトル書いたって、誰もクリックしてくれないんですよ!ちょっと今日は派手にタイトルつけさせてください!お願いします!というわけで、例えばナビゲーションの文言が変えたいとか、className取得したいとか、そういう事についてやり方かいていきます。

クリックされた奴は取得できる

例えば、ulタグの中にliタグが3つ並んでたとします。この中から真ん中のliタグが押された場合、そのliタグの情報はeventオブジェクトのtargetプロパティの中に入ってます。

targetプロパティ取得方法

こうやれば取得できます。デベロッパーツールのコンソールからどうなってるか見えます。

liタグの文言変更

この123…と並んでるリストタグの値を変えたい時にはこうやります。

クリックするとliタグ内の値が変わります。

idやクラスを取得したい場合

クリックされた要素のIDがxならyをするみたいな事がしたい場合があります。条件分岐する為にIDやclassNameが必要になる場合があります。

こうやって取得することができます。1番目しかクラスはついてないので注意して下さい。

指定した要素から何番目の要素か

クラスかIDが振ってない時にこの要素が何番目の要素なのか知りたい場合があります。

こうやれば得ることができます。

とりあえずぜんぶ

いかがだったでしょうか。クリックした時にこれだけの情報が分かると、色々制御しやすいんじゃないでしょうかってことで今日はこんな記事にしてみました!コード全部のっけときます。それではまた来週!

このエントリーをはてなブックマークに追加

コメント

"今日から役立つjQueryの小技!クリックされた奴をどうにかする方法"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ