Question

我有以下代码：

<div class="select"><input onclick="return next();" type="radio"></div>
<div class="select" style="display: none" ><input onclick="return next();" type="radio"></div>
<div class="select" style="display: none" ><input onclick="return next();" type="radio"></div>
<script>
function next() {
   $('.select').next().show();
}
</script>

考虑我点击第一个元素的单选按钮。如何在行中选择下一个父元素。现在他们都表现出来了。

谢谢，

Answer 1

您正在以错误的方式使用jQuery。

所有元素都有select类，你必须让jQuery代码知道你想要显示哪个.select旁边的.select，现在点击任何.select元素都会触发显示所有.select元素的下一个兄弟的函数。

而不是使用onclick属性来促进点击处理程序

<script>
function next() {
   $('.select').next().show();
}
</script>

使用jQuery的事件附件

<script>
$(document).ready(function(){
   $('.select').on("click", function(){
       $(this).next().show();
   });
});
</script>

从元素中删除onclick属性

<div class="select"><input  type="radio"></div>
<div class="select" style="display: none" ><input  type="radio"></div>
<div class="select" style="display: none" ><input type="radio"></div>

另请注意，目前您正在查找包含.select输入的radio元素的点击次数，这可能会导致用户甚至无法检查radio输入显示下一个.select元素。这是因为div跨越input元素的区域。我的建议是将.select div元素的宽度限制为内部内容的宽度，即输入或附加onchange事件到radio输入本身。

选择下一个元素

1 个答案: