Question

好的，我真的需要一些帮助。我尝试使用jquery ajax验证自定义商店购物车，到目前为止我服务器端的功能运行顺畅，我的真正问题是在购物车中添加商品后，商品名称应该更改颜色以指示该项目已被选中，但需要手动刷新页面才能开始更改项目名称的颜色。

这是下面的图片，

点击＆＃39; +＆＃39;按钮，这是输出：

正如您在图片中看到的，我已经围绕所选项目，选择项目后应该更改颜色。

你能帮帮我吗？

请参阅此处的代码：

$(document).ready(function(){   
$(".form-item").submit(function(e){
    var form_data = $(this).serialize();
    var button_content = $(this).find('button[type=submit]');
    button_content.html('Adding...'); //Loading button text 

    $.ajax({ //make ajax request to cart_process.php
        url: "cart_process.php",
        type: "POST",
        dataType:"json", //expect json value from server
        data: form_data
    }).done(function(data){ //on Ajax success
        $("#cart-info").html(data.items); //total items in cart-info element
        button_content.html('+'); //reset button text to original text
        alert("Item added to Cart!"); //alert user

    if($(".shopping-cart-box").css("display") == "block"){ //if cart box is still visible
        loadinc(); //trigger to update data

    }
    })
    e.preventDefault();
    });

    //Show Items in Cart
    function loadinc(){
        $(document).ready(function(){
        $(".shopping-cart-box").show(); //display cart box              
        $("#shopping-cart-results" ).load( "cart_process.php", {"load_cart":"1"}); //Make ajax request using jQuery Load() & update results

        });
    }
    loadinc();

});

这是HTML文件

<?php
//List products from database
$results = $mysqli_conn->query("SELECT * FROM tbldata where category = 'SALAD'");
if (!$results){
    printf("Error: %s\n", $mysqli_conn->error);
    exit;
}


//Display fetched records as you please
$products_list =  '<ul class="products-wrp">';

while($row = $results->fetch_assoc()) {
$products_list .= '
<li>
<form class="form-item">
<h4>'.

(in_array($row["name"],array_column($_SESSION["products"],'name')) ? '<span style="color:#b91e2d;">'.$row["name"].'</span>' :  $row["name"])

.'</h4>

<div>Price : '.$currency.' '.$row["price"].'<div>
<div class="item-box">


    <div>
    Qty :
    <select name="product_qty">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
    </div>      

    <input name="product_code" type="hidden" value="'.$row["product_code"].'">
    <button type="submit">+</button>
</div>
</form>
</li>
';

}
$products_list .= '</ul></div>';

echo $products_list;
?>

先谢谢你们！

请帮帮我......

Answer 1

你忘了这句话：

.css('color', '#b91e2d');

像这样：

$(document).ready(function(){   
    $(".form-item").submit(function(e){
        var title = $(this).closest('span');
        var form_data = $(this).serialize();
        var button_content = $(this).find('button[type=submit]');
        button_content.html('Adding...'); //Loading button text 

        $.ajax({ //make ajax request to cart_process.php
            url: "cart_process.php",
            type: "POST",
            dataType:"json", //expect json value from server
            data: form_data
        }).done(function(data){ //on Ajax success
            $("#cart-info").html(data.items); //total items in cart-info element
            button_content.html('+'); //reset button text to original text
            alert("Item added to Cart!"); //alert user
            title.css('color','#b91e2d');

            if($(".shopping-cart-box").css("display") == "block"){ //if cart box is still visible
                loadinc(); //trigger to update data
            }
        })
        e.preventDefault();
    });

    //Show Items in Cart
    function loadinc(){
        $(document).ready(function(){
            $(".shopping-cart-box").show(); //display cart box              
            $("#shopping-cart-results" ).load( "cart_process.php", {"load_cart":"1"}); //Make ajax request using jQuery Load() & update results
        });
    }
    loadinc();
});

而且，你的项目应该是：

$products_list .= '
<li>
<form class="form-item">
<h4><span'.

(in_array($row["name"],array_column($_SESSION["products"],'name')) ? ' style="color:#b91e2d;" :  "")

. '>' . $row["name"] . '</span></h4>'...etc.

Answer 2

感谢各位帮忙。

我应该放

window.location.reload();

在aler功能之后。

谢谢你们。：d

需要在更改元素样式之前刷新页面

2 个答案: