Javascript 如何使用jQuery'；s"；“最近的”；具有相同类/id'；的多个开关的功能；s_Javascript_Jquery_Html_Css_Jquery Selectors

Javascript 如何使用jQuery'；s"；“最近的”；具有相同类/id'；的多个开关的功能；s

javascript jquery html css

Javascript 如何使用jQuery'；s"；“最近的”；具有相同类/id'；的多个开关的功能；s,javascript,jquery,html,css,jquery-selectors,Javascript,Jquery,Html,Css,Jquery Selectors,我已经尝试了几种不同的方法，但都没有成功，所以我希望有人能提供帮助，我已经将下面的代码缩减到最基本的形式（和非功能形式），基本上我需要的是我将以如下所示的方式拥有大量的表行，但我希望每个复选框操作都能触发最近的项集的切换代码如下： $（文档）.ready（函数（）{ $（“输入变化”）.change（函数（）{ $（“span.disabled”）.toggle（）； $（“span.enabled”）.toggle（）； $（“span.pending”）.toggle（）； }); })

我已经尝试了几种不同的方法，但都没有成功，所以我希望有人能提供帮助，我已经将下面的代码缩减到最基本的形式（和非功能形式），基本上我需要的是我将以如下所示的方式拥有大量的表行，但我希望每个复选框操作都能触发最近的

项集的切换

代码如下：

$（文档）.ready（函数（）{
$（“输入变化”）.change（函数（）{
$（“span.disabled”）.toggle（）；
$（“span.enabled”）.toggle（）；
$（“span.pending”）.toggle（）；
});
});

悬而未决的
残废
悬而未决的
启用
试试这个-made#将更改为class，因为不可能有多个id

使用closest（'tr'）
解决问题-下面的代码片段。让我知道你对此的反馈。谢谢

$（文档）.ready（函数（）{
$（“input.change”）.change（函数（）{
$this=$（this.closest（'tr'）；
$this.find（“span.disabled”）.toggle（）；
$this.find（“span.enabled”）.toggle（）；
$this.find（“span.pending”）.toggle（）；
});
});

悬而未决的
残废
悬而未决的
启用

$（文档）.ready（函数（）{
$（“input.change”）.change（函数（e）{
e、 预防默认值（）；

$（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（）
}）；
});
});
悬而未决的
残废
悬而未决的
启用

只需将ID=“change”更改为class=“change”
也可以将$（“input#change”）更改为$（“input.change”）
并添加$（this）.parent（“td”）.parent（“tr”）.children（“td”）.children以切换以从class=“change”
中查找最近的项。您不能使用重复的id
，因此请改用类，或使用[name^=statusArray]

如果要动态添加行，请使用委托
您可以使用最近的
查找行，然后使用查找
切换


$（文档）.ready（函数（）{
$（'table'）。在（'change'，'name^=statusArray]'上，函数（）{
var行=$（this）.closest（'tr'）；
row.find（“span.disabled，span.enabled，span.pending”）.toggle（）；
});
});

悬而未决的
残废
悬而未决的
启用
将ID更改为类。如果您使用的是ID，它将只在第一行检测。效果很好，正是我试图实现的，谢谢：）无法使此项正常工作，是否要再次查看并编辑它？另外两个答案已经适用于此，但如果您想将此代码更正为工作格式，我可以投票支持您花时间回答：）
<!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();

});

    });

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