Question

当选中复选框时，尝试更改font-awesome的状态heart应更改为红色。无法找到使其正常运作的正确方法。

我可以点击心脏并隐藏复选框吗？我知道它的东西：在css之前，但不完全确定。

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

Answer 1

首先，你的小提琴不包括jQuery。其次，当您可以直接访问元素本身时，使用prop来访问jQuery对象中元素的属性是没有意义的。最后，您可以使用toggleClass()添加或删除CSS类来更改心脏的颜色。试试这个：

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

Example fiddle

Answer 2

几点

1）你的小提琴没有包含jquery库。您需要包含以使用jq语法。

2）在复选框的情况下使用更改事件比单击事件更合适。

3）使用当前选中的属性将颜色设置为图标.fa-heart

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

<强> Working Demo

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

单击jquery更改状态

3 个答案: