使用 jquery 根据条件隐藏按钮答案

【问题标题】：hide button based on condition with jquery使用 jquery 根据条件隐藏按钮
【发布时间】：2023-01-27 17:18:48
【问题描述】：

我有一个包含客户数据（如客户名称、数量、价格和状态）的表格的页面。该表如下所示：

<table>
    <tr>
        <th>No</th>
        <th>Customer</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Status</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Customer 1</td>
        <td>5000</td>
        <td>100000</td>
        <td class="status-order">Order</td>
        <td>
        <a class="btn btn-outline-primary">Update</a>
        <a class="btn btn-outline-danger">Delete</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Customer 2</td>
        <td>2000</td>
        <td>40000</td>
        <td class="status-order">Order</td>
        <td>
        <a class="btn btn-outline-primary">Update</a>
        <a class="btn btn-outline-danger">Delete</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>Customer 3</td>
        <td>3000</td>
        <td>60000</td>
        <td class="status-order">Delivered</td>
        <td>
        <a class="update btn btn-outline-primary">Update</a>
        <a class="delete btn btn-outline-danger">Delete</a>
        </td>
    </tr>
</table>

我想根据条件隐藏更新按钮。假设状态为“已交付”，则不会出现“更新”按钮。所以我创建了一个像这样的 jQuery 文件：

$(".status-order").each(function() {
    const status = $(this).text()

    if (status == "Delivered"){
        $(".update").hide()
        console.log(true)
    } else {
        $(".update").show()
        console.log(false)
    }
})

在我尝试刷新页面查看结果后，每行中的更新按钮都被隐藏了。我知道我创建的 jQuery 是错误的，你能给我正确的答案吗？如何解决这个问题？谢谢你。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

$(".update").hide() 或 $(".update").show() 都将遍历全部匹配.update 的元素并隐藏或显示它们。您只想隐藏或显示当前表格行中的 .update。

您正在迭代的 .status-order 位于之前的 <td> 中，因此使用 .next() 到达下一个 <td>，然后在其上使用 .find('.update') 到达后代。

$(".status-order").each(function() {
  const status = $(this).text();
  const update = $(this).next().find('.update');
  if (status == "Delivered") {
    update.hide()
  } else {
    update.show()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>No</th>
    <th>Customer</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Status</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Customer 1</td>
    <td>5000</td>
    <td>100000</td>
    <td class="status-order">Order</td>
    <td>
      <a class="btn btn-outline-primary">Update</a>
      <a class="btn btn-outline-danger">Delete</a>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Customer 2</td>
    <td>2000</td>
    <td>40000</td>
    <td class="status-order">Order</td>
    <td>
      <a class="btn btn-outline-primary">Update</a>
      <a class="btn btn-outline-danger">Delete</a>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Customer 3</td>
    <td>3000</td>
    <td>60000</td>
    <td class="status-order">Delivered</td>
    <td>
      <a class="update btn btn-outline-primary">Update</a>
      <a class="delete btn btn-outline-danger">Delete</a>
    </td>
  </tr>
</table>

【讨论】：