jquery - 单击时jquery更改或切换图像

Question

我正在尝试执行“单击 image1 时显示 image2，单击 image2 时显示 image3，单击 image3 时显示 image1 ...”的事情。

它适用于 2 个图像 - image1 变为 2，image2 变为 1，依此类推，但是当引入第三个图像时，它会变得混乱。我的代码是：

 <img id ="rotate_images" src="img1_on.png"/>

<script>

$('#rotate_images').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.png')
            ? 'img2_on.png'
            : 'img1_on.png';
         $(this).attr('src', src);
         var src = ($(this).attr('src') === 'img2_on.png')
            ? 'img3_on.png'
            : 'img2_on.png';
         $(this).attr('src', src);

     }

});

我有点知道它为什么会发生 - image1 转到 image3，因为它跳过了第一个代码块，而 image3 转到 image2，出于同样的原因，但是......我可以添加一些东西来修复它吗？谢谢你的帮助。

克里斯。

Answer 1

固定代码：

<img id ="rotate_images" src="img1_on.png"/>

<script>
$('#rotate_images').on({
    'click': function () {
        var origsrc = $(this).attr('src');
        var src = '';
        if (origsrc == 'img1_on.png') src = 'img2_on.png';
        if (origsrc == 'img2_on.png') src = 'img3_on.png';
        if (origsrc == 'img3_on.png') src = 'img1_on.png';
        $(this).attr('src', src);
    }
});
</script>

Answer 2

您可以使用if和else if。如果第一个条件为假，它只检查第二个条件，else如果两个条件都不为真，则进入。

$('#rotate_images').on({
    'click': function() {
         var newSrc,
             src = $(this).attr('src');
         if (src === 'img1_on.png') {
             newSrc = 'img2_on.png';
         } else if (src === 'img2_on.png') {
             newSrc = 'img3_on.png';
         } else {
             newSrc = 'img1_on.png';
         }
         $(this).attr('src', newSrc);
     }
});

但是，如果您想要一个更具可扩展性的解决方案，您可以制作一个使用数组的通用算法：

var imageSrcs = ['img1_on.png', 'img2_on.png', 'img3_on.png'];

$('#rotate_images').on({
    'click': function() {
         // find index of src within the array
         var index = imageSrcs.indexOf($(this).attr('src'));
         if (index < 0 || index == (imageSrcs.length - 1)) {
             // reset to first image
             index = 0;
         } else {
             // go to next image
             index++;
         }
         $(this).attr('src', imageSrcs[index]);
     }
});