使用jQuery切换图像src

我写了一些代码来切换图像的src，并暂停/恢复jQuery cycle2插件。使用jQuery切换图像src

我不知道为什么它不工作，并希望得到一些帮助。

$('.play-pause').click(function(){ 
    if ($(this).attr('src', '/images/template/pause.png')) { 
     $(this).attr('src', '/images/template/play.png'); 
     $('.cycle-slideshow').cycle('pause'); 
    } else if ($(this).attr('src', '/images/template/play.png')) { 
     $(this).attr('src', '/images/template/pause.png'); 
     $('.cycle-slideshow').cycle('resume'); 
    } 
});

如果我删除'else if'语句，第一个'if'语句就起作用。

感谢您的帮助。

杰夫

来源

2013-09-27 jeffusu

对于UI元素，如暂停/播放按钮，你应该使用CSS背景，不是内嵌图片。那就是你可以简单地交换类名来改变图像。

您可以使用内嵌图像，但应该再次使用类名简化。

$('.play-pause').click(function(){ 
    if (!$(this).hasClass('play')) { 
     $(this).attr('src', '/images/template/play.png'); 
     $(this).addClass('play') 
     $('.cycle-slideshow').cycle('pause'); 
    } else { 
     $(this).attr('src', '/images/template/pause.png'); 
     $(this).removeClass('play') 
     $('.cycle-slideshow').cycle('resume'); 
    } 
});

来源

2013-09-27 18:21:30

这是有帮助的。我转而使用CSS背景，而且它也很干净。 – jeffusu

是的，只需使用它并在一行代码中执行此操作即可：http://api.jquery.com/toggleClass/ –

更为通用，并检查源的图像而已，而不是整个字符串：

$('.play-pause').on('click', function(){ 
    var isPause = this.src.indexOf('pause.png') != -1; 
    this.src = isPause ? this.src.replace('pause.png', 'play.png') : this.src.replace('play.png','pause.png'); 

    $('.cycle-slideshow').cycle(isPause ? 'resume' : 'pause'); 
});

来源

2013-09-27 18:25:18 adeneo

不错的优化，但没有足够的jQuery。 – undefined

$(document).ready(function(){ 
    $(".bulb").click(function(){ 
    var src = $(this).attr('src'); 
    var newsrc = (src=='images/dim.png') ? 'images/glow.png' : 'images/dim.png'; 
    $(this).attr('src', newsrc); 
    }); 
});

更降低线是可能的，但避免混淆。基本上，它获取当前状态属性源并检查和分配所需的源。

来源

2015-01-09 22:19:55 krozaine

有时它实际上是合理的想要直接交换图像src而不是在CSS中处理它（主要是围绕怪异的bug）。我已经在这种情况下所做的是写了一个简单的辅助功能，初始src和备用SRC之间切换，你也可以指定图像元素本身，就像这样：

function toggleImgSrc(jQueryObj) { 
    tmp = jQueryObj.attr('src'); 
    jQueryObj.attr('src', jQueryObj.attr('toggle_src')); 
    jQueryObj.attr('toggle_src', tmp); 
}

和图像元素本身只是有一个名为“toggle_src”额外的属性（或者你可以动态地添加，如果你需要）：

<img src="initial_image.png" toggle_src="other_image.png"/>

来源

2015-03-13 16:35:28 Dan

我知道这是一个迟到的答案，但对使用的东西是什么simplier这样的：

$('.play-pause').click(function() { 
    var _this = $(this); 
    if (_this.attr("src") == '/images/template/pause.png') { 
     _this.attr('src', '/images/template/play.png'); 
     $('.cycle-slideshow').cycle('pause'); 
    } else { 
     _this.attr('src', '/images/template/pause.png'); 
     $('.cycle-slideshow').cycle('resume'); 
    } 
});

来源

2016-03-14 11:05:36 SoulOfkID

这是另一种方法：

<!-- HTML --> 
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

而对于jQuery的

/* jQuery */ 
$('#magic-toggle').click(function() { 
if($('.fun-img').attr('src') === plus) { 
    $('.fun-img').attr('src', minus); 
} else { 
    $('.fun-img').attr('src', plus) 
} 
})

需要一些有趣的动画，大概，但得到所做的工作。

这里有一个片段：

var plus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png'; 
 
var minus = 'https://d30y9cdsu7xlg0.cloudfront.net/png/5802-200.png'; 
 

 
$('#magic-toggle').click(function() { 
 
    if ($('.fun-img').attr('src') === plus) { 
 
    $('.fun-img').attr('src', minus); 
 
    } else { 
 
    $('.fun-img').attr('src', plus) 
 
    } 
 
})

.fun-img { 
 
    width: 80px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">

来源

2016-07-14 22:12:59

使用jQuery切换图像src

回答

相关问题