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

Answer 3

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

甚至可以减少线条，但可以避免混淆。基本上，它获取当前的状态属性源并检查和分配所需的源。

Answer 4

我知道这是一个迟到的答案但是如何使用简单的东西：

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

Answer 5

这是另一种方法：

<!-- 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)
}
})

可能需要一些有趣的动画，但要完成工作。

这是一个片段：

＆＃13;

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

＆＃13;

.fun-img {
  width: 80px;
}

＆＃13;

<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">

＆＃13;

Answer 6

有时候想要直接交换图像src而不是在CSS中处理它（实际上是处理奇怪的错误）实际上是合理的。我在这种情况下所做的是编写一个简单的辅助函数，它可以在初始src和备用src之间切换，你也可以在image元素本身上指定它，如下所示：

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

并且图像元素本身只有一个名为＆＃39; toggle_src＆＃39; （或者你可以根据需要动态添加它）：

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

Answer 7

尝试这样的事情...

$('#toggle').attr('src', 
    $(this).data('inactive')
);
$('#toggle').attr('src', 
    $(this).data('active')
);

您将需要在图像中添加data-inactive="example.com/inactive.jpg"和data-active="example.com/active.jpg"。通过将它们都存储为“数据”，您将不需要任何额外的代码即可交换URL。

用jQuery切换图像src

7 个答案: