Question

我想通过点击img使用 if 和 else 功能但“else”无法正常工作来更改CSS属性

JQUERY：

 $('.expand').click(function(){ callmeman() } );    

function callmeman(){
  if($('.expand').css('background-image') == 'url(img/UP.png)') 
  {
    $('.expand').css({'background-image':'url(img/DOWN.png)'});
  }
  else {
    $('.expand').css({'background-image':'url(img/UP.png)'});
  }
}

Answer 1

以下是使用toggleClass的解决方案。我使用了背景色，但你可以改变以改变背景图像。

＆＃13;

$('.expand').click(function() {
  $(this).toggleClass('expanded');
});

＆＃13;

.expand {
  height: 200px;
  background-color: blue;
}
.expand.expanded {
  background-color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="expand"></div>

＆＃13;

Answer 2

当jQuery返回background-image时，它会使用它的完全限定名称返回它，例如url(http://myurl.com/image/UP.png)。这就是为什么第一个if没有通过，所以它会回退到else，只是将background-image设置回url(img/UP.png)。作为测试，您可以使用它的完全限定名称指定图像，它应该可以工作。

更好更可靠的方法是使用css类。类似的东西：

CSS：

.expand up
{
    background-image: url(img/UP.png);
}

.expand down
{
    background-image: url(img/DOWN.png);
}

jQuery的：

$('.expand').toggleClass('up').toggleClass('down');

否则不工作（Jquery）

2 个答案: