使用jQuery切换图像src [英] Toggling an image src with jQuery

问题描述

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

I wrote some code to toggle the src of an image and also to pause/resume the jQuery cycle2 plugin.

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

I'm not sure why it isn't working and would appreciate some help.

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

If I remove the 'else if' statement the first 'if' statement works.

感谢您的帮助。

杰夫

推荐答案

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

For UI elements, such as pause/play buttons, you should be using CSS backgrounds, not inline images. That was you can simply swap class names to change the image.

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

You can use inline images, but you should simplify using class names, once again.

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

这篇关于使用jQuery切换图像src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！