javascript - 如何将 jQuery 的 "closest"函数与相同类/id 的多个切换一起使用?

标签 javascript jquery html css jquery-selectors

尝试了几种不同的方法都没有成功,所以我在这里伸出援手希望有人能提供帮助,我已经将下面的代码缩减为最基本的(和非功能性的形式),基本上我需要的是我将拥有表行堆的方式如下所示,但我希望每个复选框操作都触发最近的 <span> 集的切换。元素。

代码如下:

$(document).ready(function() {

  $("input#change").change(function() {
    $("span.disabled").toggle();
    $("span.enabled").toggle();
    $("span.pending").toggle();
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form action="page.php" method="post">

  <table>
    <!-- Row 1 -->
    <tr>
      <td>
        <span class="pending" style="display:none;">PENDING</span>
        <span class="disabled">DISABLED</span>
      </td>
      <td>
        <input type="checkbox" name="statusArray[]" id="change" value="1" />
      </td>
    </tr>
    <!-- Row 2 -->
    <tr>
      <td>
        <span class="pending" style="display:none;">PENDING</span>
        <span class="enabled">ENABLED</span>
      </td>
      <td>
        <input type="checkbox" name="statusArray[]" id="change" value="2" />
      </td>
    </tr>
  </table>
  
  </form>

如果只有一行,上面的代码就可以工作,但我需要它来处理多行。

复选框将始终命名为 statusArray[]并标记为 #change

有 3 个跨度,虽然每一行在任何时候都只有两个,它们是 span.enabled , span.disabledspan.pending

有没有办法使用 jquery 来激活 toggle仅在当前表行?我需要找出可以实现此目的的方法。

非常感谢任何帮助。

最佳答案

尝试将 #change 分类为多个 id 是不可能的。

使用 closest('tr') 解决下面的问题片段。让我知道您对此的反馈。谢谢!

$(document).ready(function() {

  $("input.change").change(function() {
    $this = $(this).closest('tr');   
    
    $this.find("span.disabled").toggle();
    $this.find("span.enabled").toggle();
    $this.find("span.pending").toggle();
  });

});
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
  <form action="page.php" method="post">
    <table>
      <!-- Row 1 -->
      <tr>
        <td>
          <span class="pending" style="display:none;">PENDING</span>
          <span class="disabled">DISABLED</span>
        </td>
        <td>
          <input type="checkbox" name="statusArray[]" class="change" value="1" />
        </td>
      </tr>
      <!-- Row 2 -->
      <tr>
        <td>
          <span class="pending" style="display:none;">PENDING</span>
          <span class="enabled">ENABLED</span>
        </td>
        <td>
          <input type="checkbox" name="statusArray[]" class="change" value="2" />
        </td>
      </tr>
    </table>

  </form>


</body>

</html>

关于javascript - 如何将 jQuery 的 "closest"函数与相同类/id 的多个切换一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39317525/

相关文章:

javascript - 在数据表分页中显示第一个和最后一个按钮

javascript - 对 Sinatra 应用程序的 Jquery Ajax 请求

javascript - JSON.stringify 忽略嵌套对象

javascript - 为什么这个下拉菜单会移动另一个元素?

javascript - 如何使用 pdf.js 确定 pdf 的大小以便我可以缩放到屏幕大小?

javascript - 从子 Controller 获取表单状态到父 Controller

javascript - angular.bind 与 ECMAScript 5 .bind

javascript - react 事件处理程序未在 Docusaurus 页面上执行

JavaScript 多个循环

javascript - 如何保持从 Angular 到 NodeJS 的连接