javascript 使用 jquery 单击图像后将图像更改为另一个
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18679472/
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
Changing a image for another after clicking on it with jquery
提问by Nahomy Atias
this is going to be my first question so far cause i always do a research before using forums, but i dont get this to work.
到目前为止，这将是我的第一个问题，因为我总是在使用论坛之前进行研究，但我没有让它起作用。
I have an Image that works as a button for a toggle animation (button.png) and i want that image to change after clicking on it for another image (button2.png), and once you click the second image it changes again to the first image, i have:
我有一个用作切换动画 (button.png) 按钮的图像，我希望该图像在单击另一个图像 (button2.png) 后更改，单击第二个图像后，它再次更改为第一张图片，我有：
<script type="text/javascript">
$(document).ready(function() {
// when click on the tag with id="btn"
$('#btn').click(function() {
// change the state of the "#idd"
$('#idd').toggle(800, function() {
// change the button text according to the state of the "#idd"
if ($('#idd').is(':visible')) {
$('#btn').attr('images/button2.png', this.href); // Show Less.. button
} else {
$('#btn').attr('images/button.png', this.href); //Learn More.. button
}
});
});
});
</script>
and my Html:
和我的HTML：
<div id="idd" style="display:none;">
- Here my hidden content -
</div>
<!-- Button -->
<img src="images/button.png" style="cursor: pointer;" id="btn">
What im doing wrong? Please Help :(
我做错了什么？请帮忙 ：（
采纳答案by Konsole
Check the syntax for .attr. It should be something like
检查语法.attr。它应该是这样的
$('#btn').attr('src', 'your image src');
Function Reference: http://api.jquery.com/attr/
函数参考：http: //api.jquery.com/attr/
回答by Aaron
To change the value of srcyou use 'attr'like this:
要更改src您使用的值，'attr'如下所示：
$('#btn').attr('src', 'images/button2.png');
Here is a DEMO
这是一个演示
HTML
HTML
<div id="idd" class='display-none'>
- Here my hidden content -
</div>
<!-- Button -->
<img src="http://placekitten.com/40/40" id="btn">
CSS
CSS
.display-none {
display:none;
}
jQuery
jQuery
var btn = $('#btn');
var idd = $('#idd');
btn.click(function() {
idd.toggle(800, function() {
// change the button text according to the state of the "#idd"
if (idd.hasClass('display-none')) {
btn.attr('src', 'http://placekitten.com/50/50');
idd.removeClass('display-none');
} else {
btn.attr('src', 'http://placekitten.com/40/40');
idd.addClass('display-none');
}
});
});
回答by sheelpriy
take one division e.g #play-pause-button and other in this i.e #play-pause. now put ur images in the src of inner division , on the click of outer divison source of innner division will change.. here is simillar example i'm working on. hope will help you.!
采取一个部门，例如#play-pause-button 和其他部门，即#play-pause。现在把你的图像放在内部门的 src 中，点击内部门的外部门源会改变..这是我正在处理的类似例子。希望能帮到你。！
$('#play-pause-button').click(function () {
// $('#play-pause-button').play();
if ($("#media-video").get(0).paused) {
$("#media-video").get(0).play();
$("#play-pause").attr('src', "Image1 path");
}
else {
$("#media-video").get(0).pause();
$("#play-pause").attr('src', "Image2 path");
}
});
回答by ltiong_sh
You should use css to associate image(s) on your "button" and a css class to determine which to show.
您应该使用 css 将“按钮”上的图像和 css 类相关联，以确定要显示的图像。
You can then use Jquery's ToggleClass() to add/remove the class. You can use the same class to show/hide your hidden content.
然后您可以使用 Jquery 的 ToggleClass() 添加/删除该类。您可以使用相同的类来显示/隐藏隐藏的内容。
markup
标记
<div id="idd">
- Here my hidden content -
</div>
<div id="btn">Click Me</div>
css
css
#idd.off {
display:none;
}
#btn {
border:1px solid #666;
width:100px; height:100px;
background:#fff url(images/button.png) no-repeat 0 0; // Show Less.. button
}
#btn.off {
background:#fff url(images/button2.png) no-repeat 0 0; //Learn More.. button
}
jquery
查询
$('#btn').click(function(){
$('#idd').toggleClass('off');
$('#btn').toggleClass('off');
});
