在第一次单击时更改背景图像 - 然后在第二次单击时再次使用 jquery 将其更改回来答案

【问题标题】：Changing a background image upon 1st click - then changing it back again on the 2nd click with jquery在第一次单击时更改背景图像 - 然后在第二次单击时再次使用 jquery 将其更改回来
【发布时间】：2013-10-01 16:53:41
【问题描述】：

我有一个 div 元素，我想在单击 div 时更改其背景图像 - 然后在再次单击时将图像更改回原始图像。 div CSS 代码如下，显示了它的 Class 和 ID：

.tab_box
{
width:2%;
height:20%;
position:absolute;
left:100%;
}

#tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

我有 3 个其他 div 都使用相同的“类”，然后每个都有一个单独的“id”来给他们单独的图像。

我使用 toggleClass 尝试了以下 j-query/css，但它似乎不起作用：

.one
{
width:2%;
height:20%;
background:url('mots.png') no-repeat center center;
background-size:120%;
position:absolute;
left:100%;
}
<script>
$(document).ready(function(){
$('#tab_box1').click(function() {
$('#tab_box1'').toggleClass("one")
});
});
</script>

关于我哪里出错的任何建议，或者除了 toggleClass 之外还有什么方法可以用来来回切换图像？

【问题讨论】：

在 toggleClass 行中看起来像一个额外的刻度线。
谢谢 - 但是即使删除，上面的代码仍然不起作用
我认为您在 CSS 中的声明不够具体。尝试将.one 更改为#tab_box1.one。
另外，请记住，切换类不会删除现有类——它只会添加.one 或删除.one。您不必重新定义所有样式，只需重新定义背景即可。
感谢 Chad 关于不需要重新定义所有样式的说明 - 稍微整理了代码 :-)

标签： jquery css image onclick toggle

【解决方案1】：

因为css rule precedence，id rule 优先于class rule。

在您的情况下，id 规则 #tab_box1 设置了背景图像，然后您尝试使用类规则 .one 更改它。

一个讨厌的解决方法是在类规则中使用!important

.one {
    width:2%;
    height:20%;
    background:url('http://placehold.it/32/f00000') no-repeat center center !important;
    background-size:120%;
    position:absolute;
    left:100%;
}

演示：Fiddle

正确的解决方法是在此处使用类而不是 id，例如

<div class="tab_box tab_box1">sadfsdf</div>

而不是

<div id="tab_box1" class="tab_box">sadfsdf</div>

然后

.tab_box1
{
background:url('cars.png') no-repeat center center;
background-size:120%;
-moz-background-size:120%;
-o-background-size:120%;
-ms-background-size:120%;
}

演示：Fiddle

【讨论】：

正确的问题 - 那么有没有办法在不改变类的情况下改变图像？有没有办法切换“id”？
不要改变你的目标，改变你指定原始样式的方式。在 CSS 中使用类而不是 ID。
谢谢 Arun - “讨厌的”修复工作，但我担心的是为什么它被认为是讨厌的修复？是否会导致进一步的并发症，即使用不同的浏览器等？
@SamFridayWelch 因为我讨厌使用!important...第二种解决方案更好
@SamFridayWelch 因为!important 定义，其他css规则的任何未来更改可能不会反映

【解决方案2】：

这将使 div 表现得像一个按钮，在按住鼠标时切换到不同的图像，并在释放鼠标按钮时恢复到原始图像。

$("#button1").mousedown(function() {
    $(this).css({'background-image': 'url(image2.jpg)'}) 
}).mousedown(function(){
    $(this).css({'background-image': 'url(image1.jpg)'}) 
});

HTML：

<div id="button1" style="background-image:url('image1.jpg');"></div>

来源/参考：

CSS background-image - What is the correct usage?

changing the background image on mouse down

【讨论】：