php - 更改元素样式前需要刷新页面

Question

我正在尝试使用 jQuery ajax 验证自定义购物车，目前我服务器端的功能运行平稳，我真正的问题是在将商品添加到购物车之后。 Item name 应该会更改颜色以指示该元素已被选中，但需要手动刷新页面才能开始更改元素名称的颜色。

这是下图:

点击“+”按钮后，输出如下:

正如你在图片中看到的，我已经圈出了所选元素，选择元素后应该会改变颜色。

请看这里的代码:

$(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.