jquery - 发布成功后更改 Font Awesome 图标颜色

Question

我想将 fa heart 的图标颜色更改为红色或绿色，如下所示 我尝试使用以下内容，但它仍然在屏幕上保持绿色，如果我尝试正确的方法，请问大家有什么想法吗。

不受欢迎的绿色:007c7a
最喜欢的粉红色:f7296a

$(".btnRemoveFave").find('.fa-heart').css('color', '#007c7a');

<script>
            $(document).ready(function () {
                $(".btnAddFave").click(function () {
                      var productId = $(this).data("product-id");
                     $.ajax({
                        type: "POST",
                        url: "/dynamic/Favourite.aspx/AddToFavourites",
                        data: JSON.stringify({ 'productId': productId }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        error: function (xhr, status, error) {
                            alert(xhr.status);
                            alert(xhr.responseText);
                        },
                        success: function (response) {
                            $(".btnAddFave").find('.fa-heart').css('color', '#f7296a');

                            alert(response.d);
                        },
                        failure: function (response) {
                            alert(response.d);
                        }
                    });
                });

            });
        </script>


<script>  

            $(document).ready(function () {
                $(".btnRemoveFave").click(function () {
                    var productId = $(this).data("product-id");
                    var customerId = $(this).data("customer-id");
                       $.ajax({
                        type: "POST",
                        url: "/dynamic/Favourite.aspx/RemoveFavouriteByCustId",
                        data: JSON.stringify({ 'custId': customerId, 'productCode': productId }),
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        error: function (xhr, status, error) {
                            alert(xhr.status);
                            alert(xhr.responseText);
                        },
                        success: function (response) {
                            $(".btnRemoveFave").find('.fa-heart').css('color', '#007c7a');

                            alert(response.d);
                        },
                        failure: function (response) {
                            alert(response.d);
                        }
                    });
                });

            });
        </script>

Answer 1

FontAwesome 使用 :before 伪元素来创建图标，您不能选择伪元素 - 它们不是 DOM 的一部分。

另一种方法是为“最喜欢的”样式创建一个类，然后添加该类...

$(".btnRemoveFave").find('.fa-heart').addClass('faved');