单击jquery更改状态

Change status on click jquery

本文关键字：状态 jquery 单击      更新时间：2023-09-26

尝试更改font-awesome的状态，当复选框被选中时，心脏应该变为红色。找不到合适的东西让它工作。

我可以点击心脏并隐藏复选框吗?我知道它在css中是before，但不完全确定。

http://jsfiddle.net/xd8LbtLz/

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

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

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

例子小提琴

你可以使用

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

小提琴

几点

1)你的小提琴没有包含jquery库。为了使用jq语法，您需要包含它。

2)对于复选框，使用change event比使用click event更合适。

3)使用current checked属性为图标.fa-heart设置颜色

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

相关文章：