jquery - 在第一次点击时更改背景图片 - 然后在第二次点击时使用 jquery 再次将其更改回来

Question

我有一个 div 元素，它是我想在单击 div 时更改的背景图像 - 然后在再次单击时将图像更改回原始图像。 Div CSS 代码如下，显示了它的类和 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 之外还有什么方法可以用来来回切换图像？

Answer 1

是因为css rule precedence , id 规则 优先于 class 规则。

在您的情况下，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