jQuery：使用按钮旋转图像

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