使用 jQuery 切换图像 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19057513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggling an image src with jQuery
提问by jeffusu
I wrote some code to toggle the src of an image and also to pause/resume the jQuery cycle2 plugin.
我编写了一些代码来切换图像的 src 并暂停/恢复 jQuery cycle2 插件。
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');
}
});
If I remove the 'else if' statement the first 'if' statement works.
如果我删除“else if”语句，则第一个“if”语句将起作用。
Thanks for the help.
谢谢您的帮助。
Jeff
杰夫
回答by adeneo
Be more generic, and check the source for the image only, not the entire string :
更通用，只检查图像的来源，而不是整个字符串：
$('.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');
});
回答by Diodeus - James MacFarlane
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.
对于 UI 元素，例如暂停/播放按钮，您应该使用CSS 背景，而不是内嵌图像。那就是你可以简单地交换类名来改变图像。
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');
}
});
回答by krozaine
$(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 );
});
});
Even more reducing lines is possible but avoided confusion. Basically , it gets the current state attribute source and checks and assigns required source.
更多的减少线是可能的，但避免了混淆。基本上，它获取当前状态属性源并检查和分配所需的源。
回答by SoulOfkID
I know this is a late answer but what about using something simplier like:
我知道这是一个迟到的答案，但是使用更简单的东西怎么样：
$('.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');
}
});
回答by Adrián S. Basave
This is another approach:
这是另一种方法：
<!-- HTML -->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/5805-200.png" class="fun-img" id="magic-toggle">
And for the jQuery
而对于 jQuery
/* jQuery */
$('#magic-toggle').click(function() {
if($('.fun-img').attr('src') === plus) {
$('.fun-img').attr('src', minus);
} else {
$('.fun-img').attr('src', plus)
}
})
Needs some fun animation, probably, but gets the work done.
可能需要一些有趣的动画，但可以完成工作。
Here's a snippet:
这是一个片段：
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">回答by PJ Brunet
Try something like this...
尝试这样的事情......
$('#toggle').attr('src',
$(this).data('inactive')
);
$('#toggle').attr('src',
$(this).data('active')
);
And you'll need data-inactive="example.com/inactive.jpg"and data-active="example.com/active.jpg"added to your image. By storing both as "data" you won't need any extra code to swap the URLs.
您将需要data-inactive="example.com/inactive.jpg"并data-active="example.com/active.jpg"添加到您的图像中。通过将两者都存储为“数据”，您不需要任何额外的代码来交换 URL。
回答by Dan
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:
有时，想要直接交换图像 src 而不是在 CSS 中处理它实际上是合理的（主要是解决奇怪的错误）。我在这种情况下所做的是编写了一个简单的辅助函数，它在初始 src 和备用 src 之间切换，您也可以在图像元素本身上指定，如下所示：
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):
并且图像元素本身只有一个名为“toggle_src”的额外属性（或者您可以根据需要动态添加它）：
<img src="initial_image.png" toggle_src="other_image.png"/>
