Изменить статус при нажатии jquery

Question

Попытка изменить статус шрифта-awesome, когда установлен флажок, должно измениться на красный. Не могу найти правильную вещь, чтобы заставить ее работать.

Могу ли я щелкнуть по сердцу и спрятать флажок? Я знаю его кое-что: раньше в css, но не совсем уверен.

http://jsfiddle.net/xd8LbtLz/

$('.addToFav').click(function(){ 
    if($(this).prop('checked')){ 
     console.log('change heart to red'); 
    } else { 
     console.log('do nothing atm'); 
    } 
}) 

Answer 1

Несколько точек

1) Ваша скрипка не была включена библиотека JQuery. которые необходимо включить для использования синтаксиса jq.

2) Использование события изменения более подходит в случае флажка, чем событие click.

3) использовать текущее свойство проверяется, чтобы установить цвет на иконку .fa-heart

$('.addToFav').change(function(){ 
    $(this).prev().css('color',this.checked ? "red":"black"); 
}); 

Working Demo

Answer 2

Во-первых, ваша скрипка не включает JQuery. Во-вторых, нет смысла использовать prop для доступа к свойству элемента в объекте jQuery, когда вы можете напрямую обращаться к самому элементу. Наконец, вы можете использовать toggleClass(), чтобы добавить или удалить класс CSS, чтобы изменить цвет сердец. Попробуйте это:

$('.addToFav').click(function() { 
    $('.fa-heart').toggleClass('red', this.checked); 
}) 

Example fiddle

Answer 3

Вы можете использовать,

$('.addToFav').click(function() { 
    if ($(this).prop('checked')) { 
     $(this).prev().find("i").css("color", "red"); 
    } else { 
     $(this).prev().find("i").css("color", "black"); 
    } 
}) 

Fiddle