单击以更改背景切换

click to change background toggle

本文关键字：背景 单击      更新时间：2023-09-26

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

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

这是jsfiddle示例

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

谢谢

JS

取代

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

跟

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

风格

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

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

与其使用 .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");
});

小提琴

您可以使用

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>

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

参见JSFIDDLE [example][1]

 [1]: http://jsfiddle.net/09xgrhxo/13/
相关文章：