Question

我正在尝试旋转2张图片。现在，我有这个代码：

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

效果很好：当我点击图像时，另一个出现。我想做的是完全相同，但使用按钮旋转图像，而不是点击图像本身。

Answer 1

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);
 });

该脚本假设您的页面上只有一个图像，要更改特定图像，请执行以下操作：

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);
 });

Answer 2

只需将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);
    }
});

jQuery：使用按钮旋转图像

2 个答案: