多状态按钮 - 背景色

在订单页面上，有3个按钮多状态按钮 - 背景色

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

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

[新订单]按钮默认会有绿色背景。如果我点击[加工]按钮，背景色将变成绿色。 [新订单]将不再具有背景颜色。

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

来源

2011-06-01 user622378

你得到的东西的任何机会在JSFiddle上？ – Henry 2011-06-01 13:03:51

使用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 
     }); 
    }); 
});

来源

2011-06-01 13:33:29

我已经设法让它工作，谢谢。当我刷新页面时，背景颜色不再存在。如何处理这个？ – user622378 2011-06-01 14:27:03

@ user622378你可以用jQuery的get函数处理页面刷新。每次加载页面时，都相应地从服务器和样式按钮加载页面状态。 – 2011-06-01 14:29:26

这是好吗？它的工作虽然..如果（$（“＃statusButtons”）。长度> 0）{0} {var orderid = $（“＃orderid”）。val（）; （“＃statusButtons .adminButton＃”+ data）.css（“background-color”，“”）.get（“/ admin/order/status”，{ orderid：orderid }，function（data）{ $绿色“）; }）; – user622378 2011-06-01 14:52:38

只是做你所描述的... 我会开始你。我不想做所有的工作！：d

在HTML

<input id="processing" type="button" /> 
<input id="newOrder" type="button" />

在脚本

$(document).ready(function() { 
    $('input#newOrder').click(function(){ 
    $(this).css([changeBg]); 
    $.ajax({ 
     url: "[pageToHandleUpdate]", 
     data: "[update DB data]", 
     success: function(){ //this is what I do after finishing the ajax call... 
     $(this).css([change the style]); 
     $('#newOrder').css([changeBg]); 
     } 
    }); 
    return false; 
    }); 
});

的[...]是不完整的。

来源

2011-06-01 13:30:30 Kraz

多状态按钮 - 背景色

回答

相关问题