如何使用ajax調用更新清單的狀態

Question

我正在嘗試通過單擊按鈕來更新清單的狀態。 我可以通過對清單項目進行單獨的 ajax 調用來實現它，還是可以通過一次調用來實現它，並在完成后立即更新它。

我附上了它的外觀和我想要實現的模板。

抱歉嘗試上傳 CSS 圖像文件，但無法上傳。

這是它的樣子

提前致謝。`

 div { width: 30%; top: 50%; left: 50%; border: 1px solid black; } ul { list-style: none; width: 30%; } li { padding-top: 20px; } img { float: right; display: inline; text-align: middle; transition: all .2s ease; } .pass { background: url('status1.png') no-repeat -2px -47px; width: 20px; height: 20px; } .fail { background: url('status1.png') no-repeat -2px -70px; width: 20px; height: 20px; } .inprog { background: url('status1.png') no-repeat -2px -25px; width: 20px; height: 20px; } .pend { background: url('status1.png') no-repeat -2px -3px; width: 20px; height: 20px; }

 <div> <h4> Please Wait...... Performing checks on</h4> <ul> <li> check1 <img src="img_trans.gif" class="pass" /></li> <li> check2 <img src="img_trans.gif" class="fail" /></li> <li> check3 <img src="img_trans.gif" class="inprog" /></li> <li> check4 <img src="img_trans.gif" class="pend" /></li> </ul> </div>

`

Answer 1

你可以通過兩種方式做到這一點

1）進行ajax調用並准備內容並追加

2）再次進行ajax調用並根據響應動態分配您的類

(pass, fail, inprog, pend)