Question

我有购物车页面，我正在展示不同的商品

@foreach($model_parts as $key=>$val)
<div class="col-md-6">
   <!-- <pre>{{  print_r($val->toArray())}}</pre>  -->
    <div class="product-box">
        <div>{{$val['repair']['parts_name']}}</div>
        <div>{{$val['parts_price']}}</div>
        <div><button class="btn btn-info " id="togglebutton_{{$val['id']}}" onclick="addToCart({{$val['id']}})">Add to Cart</button></div>
    </div>
</div>
@endforeach

当用户点击添加到购物车按钮时，背景需要更改

这是我的AJAX电话

function addToCart(product) {
    $.ajax({
        type: 'POST',
        url: base_url + 'myteam/add-to-cart',
        data: {parts_name: product, _token: "{{ csrf_token() }}"},
        success: function (data) {
            console.log(data);
            $('body').load(location.href + "#cart-list");

            if (data.type == 'new' && data.msg == 'success') {
                setTimeout(function () {
                    $('#togglebutton_' + data.classStyles).addClass('darkProduct');
                }, 200);
            }
            if (data.type == 'already_exist' && data.msg == 'success') {
                setTimeout(function () {
                    $('#togglebutton_' + data.classStyles).removeClass('darkProduct').addClass('noProduct');
                }, 200);

            }
        }
    });
}

每次用户点击添加到购物车按钮产品将保持在会话中，现在我可以为页面刷新设置最后添加的购物车的颜色。

Answer 1

您可以检查是否单击了按钮，并根据您可以根据需要更改css。

 $("#buttonid").click(function(){
        if(clicked){
            $(this).css('background-color', 'red');
            clicked  = false;
        } else {
            $(this).css('background-color', 'blue');
            clicked  = true;
        }   
    });

你可以这样做而不是

$("#buttonid").click(function(){
    var color = clicked ? 'red' : 'blue';
    $(this).css('background-color', color);
    clicked = !clicked;
});

我们使用三元语句将颜色选择移动到单个变量选项，然后我们只需要将对元素的CSS的更改写出一次。然后我们翻转布尔值。

Answer 2

使用jquery css（）方法。

'/name' loads the controller so does '/asdf'

在onclick函数中添加上面的代码。，然后

$routeProvider.
        when('/date', {
            controller: 'myCtrl'
        })
        when('/name', {
            controller: 'myCtrl'
        })
        .otherwise({
            templateUrl: 'error.html'
        });

更改添加到购物车的背景颜色

2 个答案: