[英]JQuery - Replacing a background-image for another on click
I would like to replace a background image with another background image on click.我想在单击时用另一个背景图像替换背景图像。 Eventually I would like to be able to toggle the image on and off by clicking the image.
最终,我希望能够通过单击图像来打开和关闭图像。
HTML HTML
<div class="arrow-up" role="button"></div><div class="arrow-down" role="button"></div>
CSS CSS
.arrow-up {
width: 15px;
height: 14px;
background-image: url("//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")!important;
background-position: center center;
border: none!important;
}
.arrow-down {
margin: 2px 0px 0px 0px;
width: 100%;
height: 14px;
display: block;
cursor: pointer;
background-position: center center;
background-repeat: no-repeat;
width: 15px;
margin-left: auto;
margin-right: auto;
outline: none;
}
.arrow-down {
width: 15px;
height: 14px;
background-image: url("//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")!important;
background-position: center center;
border: none!important;
}
.arrow-up {
margin: 2px 0px 0px 0px;
width: 100%;
height: 14px;
display: block;
cursor: pointer;
background-position: center center;
background-repeat: no-repeat;
width: 15px;
margin-left: auto;
margin-right: auto;
outline: none;
}
.arrow-down {
background-position: -30px -24px!important;
}
.arrow-down {
background-image: url(sprite-reddit.ZDiVRxCXXWg.png);
background-position: 0px -865px;
background-repeat: no-repeat;
}
.arrow-up {
background-position: 0px -24px!important;
}
JQuery查询
$(document).ready(function () {
$(".arrow-up").click(function () {
$(this).css("background-image", "http://i.imgur.com/rySpqwS.jpg");
});
});
Would I be able to toggle the image like this?我可以像这样切换图像吗? Because this solution doesn't seem to function.
因为这个解决方案似乎不起作用。
Jquery查询
$(document).ready(function () {
$(".arrow-up").click(function () {
if ($(this).css("background-image") == "//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")
{
$(this).css("background-image", "url(http://imgur.com/dpvAtIb.jpg)")
}
else {
$(this).css("background-image", "url(//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png)")
}
});
});
The correct CSS value for a background-image is url(image)
背景图像的正确 CSS 值是
url(image)
$(document).ready(function () {
$(".arrow-up").click(function () {
$(this).css("background-image", "url(http://i.imgur.com/rySpqwS.jpg)");
});
});
Note that javascript won't be able to set the background image, as it's set with !important
in the CSS, and !important
overwrites inline styles, so you won't see any change until you remove !important
from your styles.请注意,javascript 将无法设置背景图像,因为它是在 CSS 中使用
!important
设置的,并且!important
覆盖内联样式,因此在从样式中删除!important
之前,您不会看到任何更改。
Using !important
generally means you've failed miserably at something, it's not something you should use on all your styles.使用
!important
通常意味着你在某件事上惨遭失败,这不是你应该在所有风格上使用的东西。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.