Javascript 单击以更改背景切换

当我点击它时，背景会改变。它很好用。但是如果我想再次点击它来恢复原始背景呢？我有以下代码：

jQuery(document).ready(function($) {
    $(".select").on("click", function () {
        $(this).css("background-image", "url(images/selected.png)");
    });
});

这是JSFIDLE

基本上，当我点击div时，它会改变背景，这很好。但我想有能力再次点击它来恢复原始背景。 它将是勾选框的替代解决方案，但仅用于演示目的

谢谢

JS

替换

$(this).css("background-image", "url(images/selected.png)");

与

风格

---

Fiddle

而不是使用

.css（）

来更改

背景图像

我会在css中添加一个类，并使用

.toggleClass（）

还要注意，简单地添加一个类是不够具体的，因为您的css正在使用：

#multiselect .select 

您必须将添加为

#multiselect

子类的类作为目标：

#multiselect .change

CSS

#multiselect .change{
   background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}

$(".select").on("click", function () {
    $(this).toggleClass("change");
});

JS

#multiselect .change{
   background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}

$(".select").on("click", function () {
    $(this).toggleClass("change");
});

---

您可以使用

数据-*

属性

$（'.select'）.attr（'data-img'，$（'.select'）.css（'background-image'））；
$（“.select”）。在（“单击”，函数（）{
$（this.css（“背景图像”），（$（this.css（“背景图像”）===$（this.data（'img'））？“url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)“：$（this.data（'img'））；
});
#多选。选择{
背景：url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA）中心；
宽度：250px；
高度：100px；
边缘底部：20px；
}

选择1
选择2
选择3
我建议创建两个属性相同但要切换的背景img url不同的类，而不是在javascrpt中编写背景img url。所以这里我们将在javascript中切换类（最终是后台img）

参见jsfiddle[示例][1]

 [1]: http://jsfiddle.net/09xgrhxo/13/

切换包含css规则的类要简单得多，撤消关闭要容易得多。toggleClass（“活动”）我的坏，修改；我相信这个开关是用来做其他事情的。差不多。：）你的小提琴似乎不起作用。试试看：你的css不正确。仅使用
.active
不够具体，无法覆盖当前图像。如果已经足够，请检查fiddle链接。尝试从c=1开始；我必须点击两次才能让它第一次改变。奇怪。现在我也是。不知道发生了什么事？@Jackhardcastle-这只是另一种方式而已。@Jackhardcastle-因为我使用了不同的方法而投了反对票，对我来说没有意义，听起来很可笑。