如何将 jQuery 的 "closest" 函数与多个相同类 / id 的开关一起使用？

Question

尝试了几种不同的方法都没有成功，所以我来到这里希望有人能提供帮助，我已经将下面的代码缩减为最基本的（和非功能性的形式），基本上我需要的是我将有一堆 table 行，如下所示，但我希望每个复选框操作触发最近的 <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.disabled 和 span.pending

有没有办法使用 jquery 仅在当前 table 行激活 toggle？我需要想办法实现这一点。

非常感谢任何帮助。

Answer 1

试试这个 - 制作 #change 到 class，因为多个 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>

Answer 2

<!DOCTYPE html>
<html>
<head>

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

<script>
$(document).ready(function(){



$("input.change").change(function(e){
      e.preventDefault();

$(this).parent("td").parent("tr").children("td").children("span.disabled").toggle(); $(this).parent("td").parent("tr").children("td").children("span.enabled").toggle(); $(this).parent("td").parent("tr").children("td").children("span.pending").toggle();

});

    });

});
</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>

只需将 ID="change" 更改为 class="change" 还有 $("input#change") 到 $("input.change")

并添加 $(this).parent("td").parent("tr").children("td").children 以切换以从 class="change"

Answer 3

您不能重复使用 id，因此请改用 class，或使用 [name^=statusArray]

如果要动态添加行，则使用委托。

您可以使用closest找到该行，然后使用find到toggle。

$(document).ready(function() {

  $('table').on('change', '[name^=statusArray]', function() {
    var row = $(this).closest('tr');
    row.find("span.disabled,span.enabled,span.pending").toggle();
  });

});

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

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

如何将 jQuery 的 "closest" 函数与多个相同类 / id 的开关一起使用？

How to use jQuery's "closest" function with multiple toggles of same classes / id's?

html

javascript

css

jquery

jquery-selectors

如何将 jQuery 的 "closest" 函数与多个相同 类 / id 的开关一起使用？

How to use jQuery's "closest" function with multiple toggles of same classes / id's?

html

javascript

css

jquery

jquery-selectors

如何将 jQuery 的 "closest" 函数与多个相同类 / id 的开关一起使用？