如何使用jQuery实现点击触发文本与方形矩形的修改？

看起来你已经把界面复刻工作搞定了，接下来用jQuery实现点击交互其实很简单，结合你给出的HTML片段，我来给你一步步拆解实现方案：

首先先补全一下你提供的HTML片段（假设那个文本元素的完整类名是items-waiting）：

<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>

实现思路 #

我们需要完成两个核心交互：点击目标元素时，修改指定文本内容，同时改变方形矩形的样式（或添加内容）。这里以点击整行触发交互为例，你也可以改成只点击右侧的文本/方形区域。

具体代码实现 #

1. jQuery 交互代码

// 等待页面DOM完全加载后再执行
$(document).ready(function() {
  // 给表格行绑定点击事件
  $('tr').on('click', function() {
    // 定位当前行内的文本元素
    const $statusText = $(this).find('.items-waiting');
    // 定位当前行内的方形元素
    const $square = $(this).find('.square-white');

    // 切换文本内容：点击一次切换状态
    if ($statusText.text().trim() === 'Items Waiting') {
      $statusText.text('Processed'); // 改成你想要的目标文本
    } else {
      $statusText.text('Items Waiting'); // 切回原文本
    }

    // 切换方形的样式和内容
    $square.toggleClass('square-active'); // 用类来管理样式更方便
    // 给方形添加/移除勾选标记
    $square.text($square.text() === '' ? '✓' : '');
  });
});

2. 配套CSS样式

/* 初始方形样式 */
.square-white {
  width: 22px;
  height: 22px;
  display: inline-block;
  border: 1px solid #ddd;
  background-color: #fff;
  margin-right: 10px;
  text-align: center;
  line-height: 22px;
  cursor: pointer;
}

/* 点击后的激活样式 */
.square-active {
  background-color: #28a745;
  border-color: #28a745;
  color: #fff;
}

关键细节说明 #

• $(this)的使用：确保我们只修改当前点击行内的元素，不会影响表格里的其他行，这在多行数据的场景下非常重要。
• toggleClass()：相比直接用.css()修改样式，用类来管理样式更易于维护，后续要调整样式只需要修改CSS即可。
• 文本切换逻辑：用trim()处理文本是为了避免空格干扰判断，确保状态切换准确。
• 引入jQuery：记得在你的fiddle里先引入jQuery（Bootstrap 4依赖jQuery，所以你应该已经加了，但要确保顺序是jQuery在前，Bootstrap在后）。

如果不需要切换状态，只是点击一次就固定修改成某个内容，代码可以更简单：

$(document).ready(function() {
  $('tr').on('click', function() {
    $(this).find('.items-waiting').text('Done');
    $(this).find('.square-white').addClass('square-active').text('✓');
  });
});

这样就能实现你想要的点击修改文本和方形矩形的效果啦！

内容的提问来源于stack exchange，提问作者flash