javascript - 多个状态按钮 - 背景颜色

Question

订单页面有3个按钮

[新订单][处理中][已完成]

如果我点击处理按钮 - 按钮的背景应该改变。它还会将订单状态更新到数据库。

[新订单]按钮默认为绿色背景。如果我点击[处理]按钮，背景颜色将变成绿色。 [新订单]将不再有背景颜色。

使用 Jquery Ajax 处理此问题的最佳方法是什么？

Answer 1

使用 jQuery 的 css和 get/post功能....

HTML:

<button class="button">New Order</button>
<button class="button">Processing</button>
<button class="button">Completed</button>

CSS:

button.button {
    background-color:#fff;
    border:thin solid #000;
}
button.button:first-child {
 background-color:green;   
}

JS:

$(document).ready(function() {
    $("button.button").click(function() {
      $("button.button").css("background-color","#fff");
      $(this).css("background-color", "green");
        $.post("updateOrder.php", {orderStatus: $(this).text()}, function(data) {
           //database updated completion logic here 
        });
    });
});