*

イベントが発生した要素を取得する

公開日: : 最終更新日:2015/08/03 jQuery

イベントを設定したい要素はひとつとは限らない場合が
多々あります。

今回は、eqセレクターを使って、複数のa要素に対して
それぞれ異なるクリックイベントを設定しています。
eqセレクターは以前も紹介しましたが、指定した順番の要素を
取得するセレクターです。

実行結果はこちらです。

画像を変更する機能は付けることができましたが、
この表示している画像が10,20になると大変です。

そんなときに便利なのが、イベントが発生した要素を
取得するセレクター、$(this)です。

イベントを設定している click(function(){..}内で
$(this)と書くことで、イベントが発生した要素を
取得する
ことが可能です。$(this)を使用すれば、
以下のように短くできます。

サンプルコードの36行目~51行名の処理と
53行目~57行目の処理は同一の処理です。

サンプルコードの53行目~57行目は、
クリックされた要素のhref属性の$(this).attr(“href”)を
指定して、クリックされた$(this)はclickイベント以外でも
使え、役に立ちます。

スポンサードリンク

関連記事

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。 サンプルコード

記事を読む

jQuery

Masonryのギャラリーにフィルター機能を追加する

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギ

記事を読む

catejQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが 動いたときに処理を行います。 mousemove

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

catejQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの 値を徐々に変更して、独自のアニメーションを作成

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

表示中の要素を非表示にする hide()

hide()は、show()の逆の命令です。 表示されている状態(display:block)のH

記事を読む

catejQuery

要素の表示・非表示を交互に切り替える toggle()

toggle()は、要素の表示・非表示を交互に 切り替える命令です。セレクターで指定した要素が

記事を読む

jQuery

HTMLの取得と変更

.explain{ width:380px; border-radius:18px

記事を読む

catejQuery

属性値の変更・取得・削除、要素の置き換え

jQueryはHTMLの要素だけではなく、属性に設定されている値を 変更したり、取得出来たりします

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑