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

Question

I have cart page where i am showing different items

@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

When user click on add to cart button then background need to change

Here is my AJAX call

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

            }
        }
    });
}

Each time user click on add to cart button product will be kept in session and now I can able to set color for last added cart because of page refresh .

Answer 1

You can checked if button is clicked or not and based on that you can change the css as required.

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

You could do it like this instead

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

We move the color picking to a single variable choice using a ternary statement and then we only have to write out the change to the CSS of the element once. then we flip the boolean.

Answer 2

use jquery css() method.

function addtocart(){   
 $("#buttonid").css("background-color", "red");//change the background color of button to Red
    var clr="red";
}

add the above code in the onclick function., and then

$(document).ready(function(){
$("#buttonid").css("background-color", clr);
})