Переключение css по клику jQuery

166

05 декабря 2018, 14:10

Интересует переключение css по клику: Нажал раз - сменилось, Нажал два - вернулось то, что было.

Имеется:

$(document).ready(function(){
      $('.appartments-item__star').on('click', function() {  
      $(this).css({'background-image':'url(img/star-dark.png)'});   
        });
})();

Хотелось бы по второму клику получать назад url(img/star.png)

Везде используют классы, интересует же именно переключение по css, а не по классам.

Answer 1

Тогда вот так можно ...

jQuery(document).ready(function($) { 
 
  $('#toggle-click').on('click', function() { 
 
    if ($(this).attr('data-click-state') == 1) { 
      $(this).attr('data-click-state', 0) 
      $(this).css('background-color', 'red') 
    } else { 
      $(this).attr('data-click-state', 1) 
      $(this).css('background-color', 'green') 
    } 
 
  }); 
 
});

#toggle-click { 
  margin: 10px auto; 
  width: 200px; 
  padding: 30px 0; 
  cursor: pointer; 
  background-color: red; 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<div id="toggle-click"></div>

Answer 2

Можно вынести все стили отдельно, и переключать класс на элементе .toggleClass()

<style>
    .some {
        background-image: url(img/star-dark.png);
    }
</style>
<script>
    $(document).ready(function(){
        $('.appartments-item__star').on('click', function() {  
            $(this).toggleClass('some');   
        });
    })();
</script>