Question

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

绿色未成功：007c7a
Pink Favouried：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的一部分。

另一种方法是为“favourited”风格创建一个类，然后添加该类......

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

Answer 2

您可以使用解决方案https://jsfiddle.net/r726bf6o/3/

＆＃13;

$(".btnRemoveFave").find('i.fa-heart').css('color', '#007c7a');
$(".btnAddFave").find('i.fa-heart').css('color', '#f7296a');

$('.btnRemoveFave').wrap('<span id="ctl00_BodyContentHolder_lblfavourite-471110"><span>');

$('button.btnRemoveFave').click(function(){
  $(this).find('i.fa-heart').css('color', '#f7296a');
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btnAddFave">
  <i class="fa fa-heart"></i>
</button>
<button class="btnRemoveFave">
  <i class="fa fa-heart"></i>
</button>

＆＃13;

希望这会对你有所帮助。

改变字体真棒图标颜色成功的帖子

2 个答案: