Question

我有五个不同ID的div，但是类名相同。每个div都有两个单选按钮：Yes and No。如果用户在div中选择No，则会显示下一个div，如果他选择Yes，则应显示一条消息，所有div都隐藏（除了之前的div）。

如果用户在前4个div中选择No，则会出现这种情况，然后他再次在第二个div中选择Yes，第三个和第四个div应该隐藏，但首先应保持可见。我怎样才能隐藏所有下一个div？

这是我的HTML结构：

 <div id="div1" class="mydiv">
<asp:RadioButton ID="radio1yes" CssClass="quest" GroupName="Q1" runat="server" Text="Yes" />
<asp:RadioButton ID="radio1no" CssClass="quest" GroupName="Q1" runat="server" Text="No" />
</div>
<div id="div2" class="mydiv" class="ques">
<asp:RadioButton ID="radio2yes" CssClass="quest" GroupName="Q2" runat="server" Text="Yes" />
<asp:RadioButton ID="radio2no" CssClass="quest" GroupName="Q2" runat="server" Text="No" />
</div>
<div id="div3" class="mydiv">
<asp:RadioButton ID="radio3yes" CssClass="quest" GroupName="Q3" runat="server" Text="Yes" />
<asp:RadioButton ID="radio3no" CssClass="quest" GroupName="Q3" runat="server" Text="No" />
</div>
<div id="div4" class="mydiv">
<asp:RadioButton ID="radio4yes" CssClass="quest" GroupName="Q4" runat="server" Text="Yes" />
<asp:RadioButton ID="radio4no" CssClass="quest" GroupName="Q4" runat="server" Text="No" />
</div>

<div id="div5" class="mydiv" style="display: none">
<asp:RadioButton ID="radio5yes" CssClass="quest" GroupName="Q5" runat="server" Text="Yes" />
<asp:RadioButton ID="radio5no" CssClass="quest" GroupName="Q5" runat="server" Text="No" />
</div>

和我的JQuery

$('.quest :radio').each(function (i, obj) {
 $(obj).click(function () {

    var Id = $(obj).val();
    switch (Id) {
    case "radio1yes":
        alert("Message");
        break;
    case "radio1no":
        $("#div2").hide();
        break;
    case "radio2yes":
        alert("Message");
        break;
    case "radio2no":
        $("#div3").hide();
        break;
    }
 });
});

Answer 1

您可以使用下面的nextAll method：

$("#div2").nextAll('[id^=div]').hide();

JQuery隐藏所有下一个div

1 个答案: