Question

我正在尝试做'当点击图像1时，显示图像2，单击图像2时，显示图像3，单击图像3时，显示图像1 ...'事物。

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

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

单击时jquery更改或切换图像

2 个答案: