1

2枚の画像を回転させようとしています。今のところ、私はこのコードを持っています：

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

それは完全に機能します。画像をクリックすると、別の画像が表示されます。私がやりたいことはまったく同じですが、画像自体をクリックするのではなく、ボタンを使用して画像を回転させます。

4

2 に答える 2

2

html

<button id="imageSwitcher">Click to switch images</button>

JavaScript/jquery

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

スクリプトは、ページに 1 つの画像があることを前提としています。特定の画像に変更するには、次の手順を実行します。

html

<img id="imgSwitched" src="img1_on.jpg"/>
<button id="imageSwitcher">Click to switch images</button>

JavaScript/jquery

$("#imageSwitcher").click(function() {
   var src = ($('#imgSwitched').attr('src') === 'img1_on.jpg')
    ? 'img2_on.jpg'
    : 'img1_on.jpg';
   $('#imgSwitched').attr('src', src);
 });
于 2012-11-17T13:57:55.080 に答える
0

imgこの部分をボタンのクラス名に置き換えるだけです。

<input type="button" class="button" />

$('.button').on({
    'click': function() {
        var src = ($(this).attr('src') === 'img1_on.jpg') ? 'img2_on.jpg' : 'img1_on.jpg';
        $('img').attr('src', src);
    }
});
于 2012-11-17T13:59:00.273 に答える