javascript - JS/jQuery 用 if/else 语句改变 CSS

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

你可以有这样的设置添加/引用一个类

$(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 2

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

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

（小提琴）

Answer 3

你总是可以用 jQuery addClass()。当用户单击元素时添加一个类。并为该类赋予与没有该类的元素的背景不同的背景属性。

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")
}