Question

我正在尝试在用户单击页面的一部分后使用if / else语句更改div的背景图像。使用下面的代码，div将按预期折叠，但随附的背景图像不会更改。

$(document).ready(function() {
    $(".titles-us").click(function() {
        $(".map-us").toggle();
        $(".map-tri").hide();
        $(".map-can").hide();
        $(".map-eur").hide();
        if ($(".us-icon").css('background-image') === 'url("public/images/collapse-lg.png")') {
            $(".us-icon").css({
                'background-image' : 'url("public/images/expand-lg.png")'
            });
        }
        else {} 
    });
});

Answer 1

你总是可以用jQuery添加class（）。用户单击元素时添加一个类。并为该类提供一个不同于该类的元素背景的背景属性。

if ($(".us-icon").hasClass('collapsed') == false) {
        $(".us-icon").addClass('collapsed');
} 
// If you want to remove the background on second click:
else {
        $(".us-icon").removeClass('collapsed');
}

在你的CSS中，你可以添加：

.collapsed {
    background-image: url("public/images/expand-lg.png")
}

Answer 2

您可以使用这样的设置添加/引用类

$(document).ready(function() {
  $(".titles-us").click(function() {
  $(".map-us").toggle();
  $(".map-tri").hide();
  $(".map-can").hide();
  $(".map-eur").hide();
  if ($(".us-icon").hasClass('img-collapse'){
    $(".us-icon").removeClass('img-collapse').addClass('img-expand');
  }
  else{
    $(".us-icon").removeClass('img-expand').addClass('img-collapse');
  } 
  });
});

并在你的CSS中：

.img-collapse{
background-image : url("public/images/collapse-lg.png");
}

.img-expand{
background-image : url("public/images/expand-lg.png");
}

Answer 3

我不完全确定为什么你的原始代码不够用，但这是一个可以用来比较的工作示例：

$(".us-icon").on('click', function() {
    var myEl = $(this);
    var bgimg = myEl.css('background-image');
    if( bgimg === "url(http://placehold.it/200x200)" ) {
        myEl.css({ 'background-image' : 'url(http://placehold.it/100x100)' });
    } else {
        myEl.css({ 'background-image' : 'url(http://placehold.it/200x200)' });
    }
});

（fiddle）

JS / jQuery使用if / else语句更改CSS

3 个答案: