如何使用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)