5

我编写了一些代码来切换图像的 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”语句有效。

谢谢您的帮助。

杰夫

4

7 回答 7

9

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

$('.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-27T18:25:18.643 回答
6

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');
    }
});
于 2013-09-27T18:21:30.237 回答
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 );
    });
});

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

于 2015-01-09T22:19:55.237 回答
1

我知道这是一个迟到的答案，但是使用更简单的东西怎么样：

$('.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-14T11:05:36.637 回答
0

Occasionally it actually is reasonable to want to swap the image src directly rather than handle it in CSS (working around weird bugs, mostly). What I've done in this case is written a simple helper function that toggles between the initial src and an alternate src that you can also specify on the image element itself, like so:

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

and the image element itself just has an extra property called 'toggle_src' (or you could add it dynamically if you needed to):

<img src="initial_image.png" toggle_src="other_image.png"/>
于 2015-03-13T16:35:28.560 回答
0

尝试这样的事情......

$('#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。

于 2019-10-15T21:17:54.920 回答
0

这是另一种方法：

<!-- 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-14T22:12:59.190 回答