【jQuery】「next()」「prev()」で要素の取得して画像を変更する。

2021 2/06

2019/07/11 2021/02/06

スポンサードリンク

JavaScriptのライブラリとして一般的になったのが「jQuery」です。
いまだにjQueryを使ったサイトの案件はたくさんありますので、
JavaScriptの勉強をしていく上では逃げられないライブラリになっています。

「ボタンをオン・オフしてjQueryで画像を変えたい！」と言う時困るのが

・そもそもの画像の変える書き方がわからない
・画像を変える要素を選択する書き方がわからない

というところでしょうか。
初歩的な内容ですが、とても需要があり使うことが多いため書き方を覚えておくと便利です。

jQueryの読み込み方

jQueryをページに読み込むときには公式サイトjQueryよりファイルをダウンロードし自身のサーバーへアップロード
もしくはGoogleのCDNを使ってjQueryのライブラリファイルを読み込みます。

jQueryに関してはどちらも無料で利用ができます。

・公式サイトjQueryからダウンロードするメリット・デメリット
自身のサーバーに置いておけるのでネットワーク環境に依存しない
バージョンアップは自分で行うこと

CDNを使ってjQueryのライブラリファイルを読み込みするメリット・デメリット
最新版を読み込める
外部サーバーから読み込むため、外部サーバーがダウンしたら使えなくなる。またネットワークで遮断していると使えない

CDNの方が楽ですが、ページの速度を優先したり、限定したネットワーク環境の場合には
jQueryライブラリをサーバーへアップロードして使ったほうが無難です。

jQueryのサイトで紹介されているCDNは

・Google CDN
・Microsoft CDN
・CDNJS CDN
・jsDelivr CDN

とありGoogle CDNが一般的によく使われているように見受けられます。

3.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

そもそも画像の変える書き方がわからない

元になるhtmlがこちら。

<div class="chgImg">
    <img src="img/a.png">
</div>

id=”sw”のbuton要素をクリックすると
a.png => b.pngとなるようにjavaScriptを書いていきます。

<script>
 //ボタンを押すと画像が変わる
 
 
    $(function(){
       $('#sw').click(function(){
           $('.chgImg').children('img').attr('src','img/b.png');
          
       });
    });
</script>

パスを探さないで#LogoのidがついたimgタグのURLを【a.png => logo.png】へ書き換える場合にはこちら

■html

<img src="img/a.png">

■javaScript(jQuery)

$('#Logo').attr('src','logo.png');

画像の変える書き方

属性の値を取得するには「Attributes」を使い
$('selector').attr('name');
で取得します。

画像指定をするタグimgには

・画像のURLのプロパティ(src)、
・画像タイトルプロパティ(title),
・画像altのプロパティ(alt),

がありそれぞれカンマ区切りで指定しています。

まとめて指定も可能です。

<script>
 //ボタンを押すと画像が変わりtitle,altが追加される 
 
    $(function(){
       $('#sw').click(function(){
           $('.chgImg').children('img').attr({
               src: 'img/b.png',
               title: '画像B-title',
               alt: '画像B-alt'
            });
          
       });
    });
</script>