プログラミング

【jQuery】対象要素(セレクタ) を2つ指定したいときの記述

スポンサーリンク

アイキャッチ

今回は、jQueryの動作を設定するとき、対象要素(セレクタ) を2つ指定したいときの記述を紹介します。

ちょっとしたことですが、気になる人もいるかと思いますので、簡単紹介します。

クリックできる目次

サンプル

例えばこんなコードです。

$("#btn").on("click", function() {
$("#img").fadeOut(500);
});

ボタン(#btn)をクリックすると画像(#img)が0.5秒かけてフェードアウトする、という内容です。

解決

通常、どんなサンプルコードでも 、「$("#img")」のように、セレクタは一つです。

しかし、「画像を2つ同時にフェードアウトさせたい」という人もいるのではないでしょうか。

そんなとき、上記で書いたサンプルコードを、セレクタを変えて2つ分を記述するのはナンセンスです。

この場合は、カンマで区切って2つ指定しましょう。

$("#img1, #img2 ")  といった具合です。

完成形

$("#btn").on("click", function() {
$("#img1, #img2").fadeOut(500);
});

これで、2つの画像(#img1と#img2)は同時にフェードアウトします。

フェードインやその他のアニメーションにも応用が利きますので、いろいろ試してくださいね。

 

さらに詳しく学習したい方はこちらもどうぞ。
https://www.jquerystudy.info/reference/selectors/multiple2.html

スポンサーリンク

-プログラミング
-, , , , ,

© 2022 サカらいふ Powered by AFFINGER5