メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


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

, ,

  1. Webプログラム
  2. javascript
  3. 今日から役立つjQueryの小技!クリックされた奴をどうにかする方法

jQuery11

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

[getpost id=”1192″]

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

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

targetプロパティ取得方法

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

liタグの文言変更

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

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

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

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

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

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

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

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

とりあえずぜんぶ

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.