Блог

Главная - Вопросы по программированию - Как протестировать цвет css в javascript

Как протестировать цвет css в javascript

#javascript #css

#javascript #css

Вопрос:

Я все еще новичок в javascript и CSS, у меня есть значок сердца в закладке, который я хочу показывать в зависимости от того, установлен или снят флажок.

 $('button').on('click', function(){
  $(this).toggleClass('faved');
  if ($(this).hasClass('faved')) {
  alert("red");
} else {
  alert("empty");
}
  
});  
 @yellow: #FFAC33;
@gray: #CCC;
@red: #E86C6C;

button#favorite {
  background: transparent;
  border: 0;
  span {
    padding: 20px;
    font-size: 70px;
    font-weight: normal;
    color: @gray;
    position: relative;
    span {
      position: absolute !important;
      top: 0;
      left: 0;
      font-size: 70px;
    }
  }
  
}


@keyframes favorite {
  .favorite;
} 

@-webkit-keyframes favorite {
  .favorite;
}

@keyframes favoriteHollow {
  .favoriteHollow;
}

@-webkit-keyframes favoriteHollow {
  .favoriteHollow;
}


button#heart {
  background: transparent;
  border: 0;
  span {
    padding: 20px;
    font-size: 70px;
    font-weight: normal;
    color: @gray;
    position: relative;
    span {
      position: absolute !important;
      top: 0;
      left: 0;
      font-size: 70px;
    }
  }
  amp;.faved {
    span {
      -webkit-animation: heart 0.5s;      
      animation: heart 0.5s;      
      color: @red;
      span {
        z-index: 1000;
        -webkit-animation: heartHollow 0.5s;      
        animation: heartHollow 0.5s;      
      }
    }
  }
}

.heart {
   {
    transform: scale(1);
  }
  {
    transform: scale(1.2);
    color: @red;
  }
   {
    transform: scale(1.4);
    color: @red;
  }
   {
    transform: scale(1);
    color: @red;
  }
}

.heartHollow {
   {
    transform: scale(1);
    opacity: 1;
  }
   {
    transform: scale(1.4);
    opacity: 0.5;
  }
  {
    transform: scale(1.6);
    opacity: 0.25;
  }
  {
    transform: scale(2);
    opacity: 0;
    display: none;
  }
}

@keyframes heart {
  .heart;
} 

@-webkit-keyframes heart {
  .heart;
} 

@keyframes heartHollow {
  .heartHollow;
}

@-webkit-keyframes heartHollow {
  .heartHollow;
}  
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

<button id="heart">
  <span class="glyphicon glyphicon-heart">
    <span class="glyphicon glyphicon-heart">
    </span>
  </span>
</button>

Я знаю, что ваше время ценно, и я ценю ваше внимание и заранее благодарю вас

Комментарии:

1. Вы имеете в виду if ($(this).hasClass(‘избранное’)) {}?

Ответ №1:

для проверки класса вы должны использовать .hasClass('your class name') или, если вы хотите проверить цвет фона if($(this).css('background') == "red") 

  $('button').on('click', function(){
      $(this).toggleClass('faved');
      if ($(this).hasClass('faved')) {
          alert("red");
      } else {
          alert("empty");
      }        
    });