单击以更改背景切换

Question

当我点击它时，它改变了背景。它工作正常。但是如果我想再次点击它恢复原来的背景怎么办？我有这个代码：

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

这是 jsfiddle EXAMPLE

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

谢谢

Answer 1

JS

替换

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

与

$(this).toggleClass("active");

风格

#multiselect .active {
    background-image: url('...');
}

Fiddle http://jsfiddle.net/09xgrhxo/4/

Answer 2

我不会使用 .css() 来更改 background-image，而是在您的 CSS 中添加一个 class 并使用 .toggleClass()。

另请注意，仅添加 class 不够具体，因为您的 css 正在使用：

#multiselect .select

您将必须定位您添加为 #multiselect 的子项的 class：

#multiselect .change

CSS

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

JS

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

FIDDLE

Answer 3

您可以使用 data-* 属性。

$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
  $(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});

#multiselect .select {
  background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
  width: 250px;
  height: 100px;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
  <div class="select">Option1</div>
  <div class="select">Option2</div>
  <div class="select">Option3</div>
</div>

Answer 4

与其在 javascrpt 中编写 background-img url，我建议创建两个 classes，它们具有相同的属性，但要切换的 background-img url 不同。所以在这里我们将在 javascript.

中切换 class（最终是 background-img）

参见 jsfiddle [示例][1]

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

单击以更改背景切换

click to change background toggle

html

javascript

css

jquery