使用 jQuery“点击”更改背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9785708/
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
Change the background image "on click" with jQuery
提问by wpdesign
I′m new to jQuery and I′m intressred in showing different background image on click event. Is there any easy way?
我是 jQuery 的新手，并且在点击事件上显示不同的背景图像时很紧张。有什么简便的方法吗？
回答by Ash Clarke
1.7+
1.7+
$("#id").on("click", function () {
$(this).css("background-image", "url(/url/to/background/image.jpg)");
});
< 1.7
< 1.7
$("#id").bind("click", function () {
$(this).css("background-image", "url(/url/to/background/image.jpg)");
});
回答by 472084
回答by Starx
Its as simple as this
就这么简单
$("#mylink").click(function() {
// ^ Attach a function on click event of an element with id="mylink"
//Change the css of a element with id="myDiv"
$("#myDiv").css("backgroundImage", "url(newimage.jpg)");
// Note ^: In jQuery, the parameters with "-" as define that way
// But of course .css() supports "-" also, but make a habit of doing in camel-case
});
Demo
演示
回答by Drakekin
$("#your_element").click(function () {
$("#your_element").css("background-image", "url(" + image_url + ")");
}
Replace #your_elementwith the appropriate selector, and image_urlwith a valid url and you're golden.
替换#your_element为适当的选择器，并image_url使用有效的 url，您就大功告成了。
回答by Shyju
$("#divBg").css("background-image", "url(http://www.androidgamespro.com/static/pic7/micky_tap_tap-jazz_Hymanrabbit-1_010-icon0.png)");
Here is the sample : http://jsfiddle.net/aGAha/2/
这是示例：http: //jsfiddle.net/aGAha/2/
回答by Murtaza
Reading your Question and knowing that you are new to jQuery, i would like to explain the answer in little more details.
阅读您的问题并知道您是 jQuery 的新手，我想更详细地解释答案。
Everybody has given the answers correct in all possible ways.
每个人都以各种可能的方式给出了正确的答案。
firstly to access any element on the page you need to select the element using jQuery selectors
首先要访问页面上的任何元素，您需要使用 jQuery 选择器选择元素
all jQuery methods are accessible inside the document.ready function
所有 jQuery 方法都可以在 document.ready 函数中访问
$(document).ready(function() {
//this represents window.load in javascript.
//now to select the element suppose you have anchor tag <a> with id=clickme
$("#clickme").click(function() {
//select the element whose background image you want to change. suppose with id=imgBack
$("#imgBack").css({'background-image':'url(newimage.jpg)'});
// Note image can be of any format (.png, .jpg, .gif, etc).
// this way you can change the image.
})
});
for more details in selecting the element with class name you can refer jQuerywebsite.
有关选择具有类名的元素的更多详细信息，您可以参考jQuery网站。
回答by sujal
$("#mylink").click(function() {
$('body').css({'background-image':'url(new_image.jpg)'});
});
<div id="mylink">Click me</a>
回答by Bizzaro
I had this same issue and found a solution using this - https://github.com/rewish/jquery-bgswitcher#readme
我遇到了同样的问题，并找到了使用它的解决方案 - https://github.com/rewish/jquery-bgswitcher#readme
