如果产品在购物车中，则Glyphicon颜色会发生变化

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 
                                            }
                                        })
                                    }
                                })
                            });
                        }
                    });

´´´

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

Answer 1

您正在选择所有glyphicon-shopping-cart来匹配当前图标，您可以插入数据ID并进行匹配，因为我看不到val.ISBN和cartdata.ISBN的结果，我将举个例子来说明它的外观

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


if (cartdata.CompanyID == JSON.parse(localStorage.getItem('userName')) && cartdata.IsInCart == true && val.ISBN == cartdata.ISBN) {

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