jquery - 如何在 jquery 中单击时更改文本和正方形矩形？

Question

我有一个屏幕截图，如下所示，我已将其复制到 HTML/CSS 中。

我创建了 fiddle对于上面的截图。已使用 Bootstrap 4 制作行和表。

我在 fiddle 中使用的 HTML 和 JQuery 代码片段是:

HTML:

    <tr>
         <td class="left">Fred Doe's Guest 1</td>
         <td class="number1">250</td>
         <td class="table1">2</td>
         <td class="right-itemswaiting">
         <div class="square-white"></div>
         <span class="items-waiting">Items Waiting</span>
         </td>
   </tr>

JQuery:

  $(document).ready(function () {
    var fold = $("#fold");
    fold.cliked = 1;
    fold.click(function () {
        $(".items-waiting").text((fold.cliked++ % 2 == 0) ? "Items Waiting" : "Items Received");
    });
});

以上HTML和JQUery代码取自这个fiddle . JQuery 中使用的折叠元素(第 2 行)在 HTML 中不存在，因为我不确定如何在那里准确地使用它。

问题陈述:

我想知道我需要在 JQuery 代码中添加什么，以便在单击 Items waiting 彩色框(在屏幕截图中用箭头标记)时，文本应该从 Items waiting 更改 到收到的元素。此外，填充的白色背景方框应替换为未填充的白色方框。

Answer 1

改变这一行

<span class="items-waiting">Items Waiting</span>

到

<span id = "fold" class="items-waiting">Items Waiting</span>

编辑:正如我所看到的，您想要使用多个元素来单击，您需要使用类而不是 ID...我已经相应地更新了 fiddle 。

https://jsfiddle.net/nc2djn5p/173/