多狀態按鈕 - 背景色

在訂單頁面上，有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

多狀態按鈕 - 背景色

回答

相關問題