用jQuery切换图像src

Question

我编写了一些代码来切换图像的src,并暂停/恢复jQuery cycle2插件.

我不确定为什么它不起作用,并希望得到一些帮助.

$('.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'语句有效.

谢谢您的帮助.

杰夫

Answer 1

更通用,只检查图像的来源,而不是整个字符串:

$('.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');   
});

Answer 2

对于 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');
    }
});