如果产品在购物车中，字形图标颜色会发生变化

Question

我有网上商店，我希望用户通过更改 glyphicon-shopping-cart 颜色来了解产品是否已经在购物车中。这是我试过的：

´´´

$.ajax({
                type: 'GET',
                url: '/api/Selections',
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('accessToken')
                },
                success: function (data) {
                    $.each(data, function (i, val) {
                        if (val.Language == 'Suomi' && val.Season == '1/2020') {
                            //luodaan taulukko, johon arvot tuodaan halutuista sarakkeista
                            selection +=
                                '<tr >' +
                                "<td hidden>" + val.BookID + "</td>" +
                                "<td>" + val.ISBN + "</td>" +
                                "<td>" + val.Author + "</td>" +
                                "<td>" + val.BookName + "</td>" +
                                "<td>" + val.Publisher + "</td>" +
                                "<td>" + val.Price + "€ </td>" +
                                "<td><a href='#'><span class='glyphicon glyphicon-shopping-cart'></span></a></td>" +
                                "<td id='inCart'></td>" +
                                '</tr>';
                          // Change glyphicon color if product is in cart
                            $(function () {
                                $.ajax({
                                    type: 'GET',
                                    url: '/api/carts',
                                    dataType: 'json',
                                    success: function (cart) {
                                        $.each(cart, function (i, cartdata) {
                                            if (cartdata.CompanyID == JSON.parse(localStorage.getItem('userName')) && cartdata.IsInCart == true && val.ISBN == cartdata.ISBN) {

                                                $(".glyphicon-shopping-cart").css("color", "#29d646");
                                                // This in not working, all glyphicons change color 
                                            }
                                        })
                                    }
                                })
                            });
                        }
                    });

´´´

此代码的问题在于 table 中的所有字形都会改变颜色，而不仅仅是那些购物车 ISBN 与 tables ISBN 匹配的行。我现在如何在单击按钮时执行此操作，但是当用户转到另一个页面时，这些颜色会消失。我尝试使用 localStorage，但那里有同样的问题。怎么能做到这一点？或者还有其他方法吗？

Answer 1

您正在选择所有 glyphicon-shopping-cart 以匹配当前图标，您可以插入数据 ID 并匹配它们，因为我看不到 val.ISBN 和 cartdata.ISBN 的结果，我将以您为例它应该是什么样子

此处为 table

中的图标设置数据 ID

"<td><a href='#'><span class='glyphicon glyphicon-shopping-cart' data-id="+val.ISBN+"></span></a></td>" +

此处匹配已添加到购物车中的项目的当前行和图标

if (val.ISBN == cartdata.ISBN) {

    $(".glyphicon-shopping-cart[data-id="+val.ISBN+"]").css("color", "#808080");

如果产品在购物车中，字形图标颜色会发生变化

Glyphicon color change if product is in cart

javascript

jquery

glyphicons