еще не работает (Jquery)

Question

Я хотел бы изменить CSS свойства, нажав на Img с помощью если и еще функции, но "еще" не работает

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. Я использовал фоновый цвет, но вы можете изменить его, чтобы изменить фоновое изображение.

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

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

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

 
<div class="expand"></div>

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');