jQuery を使用した画像ソースの変更
目的は、次の DOM 構造内で画像ソースを動的に変更することです:
<div>
各画像をクリックすると、そのソースを「imgx_off.gif」に変更したいとします。ここで、「x」は"1" または "2" に対応します。
解決策: jQuery の attr() 関数を利用する
はい、CSS なしでこれを実現できます。 jQuery の attr() メソッドを使用すると、画像ソース URL を含む DOM 要素の属性を変更できます。
たとえば、画像タグが「my_image」の id 属性である場合、次のコードがその目的を果たします。
<img>
$('#my_image').attr("src", "second.jpg");このアクションをクリックに付加するにはイベント:
$('#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);
}
});以上がクリック時に jQuery を使用して画像ソースを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
