尝试了几种不同的方法都没有成功,所以我在这里伸出援手希望有人能提供帮助,我已经将下面的代码缩减为最基本的(和非功能性的形式),基本上我需要的是我将拥有表行堆的方式如下所示,但我希望每个复选框操作都触发最近的 <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
仅在当前表行?我需要找出可以实现此目的的方法。
非常感谢任何帮助。
最佳答案
尝试将 #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/