☰

jQueryを使用して画像ソースを変更する 質問する

tag-icon • tag-icon javascript jquery image
jQueryを使用して画像ソースを変更する 質問する

私の DOM は次のようになります:

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

誰かが画像をクリックすると、画像の src が画像番号 1 または 2 を表す<img src="imgx_off.gif">に変更されるようにします。x

これは可能ですか、それとも画像を変更するには CSS を使用する必要がありますか?

ベストアンサー1

jQueryの属性()関数。たとえば、imgタグに 'my_image' という属性がある場合はid、次のようにします。

<img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />

次に、jQuery を使用して次のように画像を変更できますsrc。

$("#my_image").attr("src","second.jpg");

これをイベントにアタッチするにはclick、次のように記述します。

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

画像を回転するには、次のようにします。

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

おすすめ記事