如何使用jQuery's";最接近的";具有相同类的多个切换的函数/id's

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

本文关键字：quot 函数 id jQuery 何使用 最接近 同类      更新时间：2023-09-26

我尝试了几种不同的方法，但都没有成功，所以我在这里寻求帮助，希望有人能提供帮助，我已经将下面的代码缩减到了最基本的形式(也是非功能性的形式(，基本上我需要的是我将以如下所示的方式拥有大量的表行，但我希望每个复选框操作都能触发最接近的<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只在当前表行上激活toggle？我需要想办法实现这一目标。

我们非常感谢任何协助。

由于不可能有多个id，请尝试使用此制作的#change进行分类。

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

您不能使用重复的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>

<!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(.parter("td"(.partet("tr"(.childs("td(.childers("span.disabled"(.thoggle((；$(this(.parter("td"(.partet("tr"(.childs("td(.childers("span.enabled"(.thoggle((；$(this(.eparent("td"；

});
    });
});
</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(.eparent("td">

相关文章：