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('...');
}

小提琴http://jsfiddle.net/09xgrhxo/4/

Answer 2

我没有使用.css()来更改background-image，而是在CSS中添加一个类并使用.toggleClass()。

另外请注意，简单地添加一个类将不够具体，因为你的css正在使用：

#multiselect .select

您必须定位作为#multiselect的孩子添加的课程：

#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-*属性。

＆＃13;

$('.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'));
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

我建议创建两个具有相同属性但不同的background-img url的类，而不是在javascrpt中编写background-img url。所以在这里我们将在javascript中切换类（最终为background-img）。

见jsfiddle [例子] [1]

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

单击以更改背景切换

4 个答案: