Question

我目前在我的网页上有以下代码：

<asp:RadioButtonList id="GroupButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="0" selected="true" />
    <asp:ListItem Value="1" />
    <asp:ListItem Value="2" />
    <asp:ListItem Value="3" />
    <asp:ListItem Value="4" />
    <asp:ListItem Value="5" />
    <asp:ListItem Value="6" />
    <asp:ListItem Value="7" />
</asp:RadioButtonList>
<asp:Panel ID="GroupPanel" runat="server">
    <b>How can we improve our service?</b><br />
    <asp:TextBox ID="GroupTextBox" runat="server" />
</asp:Panel>

此代码也在不同的部分重复（IndividualButtons / IndividualPanel，EducationButtons / EducationPanel等）

我试图找出一个优雅的解决方案来执行以下操作：

当单选按钮列表的选定值为0或5-7时，隐藏关联的面板。
当所选值为1-4时，显示关联的面板。
让此代码适用于所有部分，以避免膨胀（如果可能）。

有什么建议吗？

编辑：以下代码使我的GroupPanel面板隐藏，并在每次GroupButtons选择更改时显示。但同样，我需要它显示1-4，并隐藏0和5-7。

<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    var id = '<%= GroupButtons.ClientId %>_0';
       $(function() {
        var i = 0

        $('#<%= GroupButtons.ClientId %> :radio').click(function(){
            if ($(this).attr('id') != id) {
                $('#<%= GroupPanel.ClientId%>').toggle();
                id = $(this).attr('id');
            }
        });
        });
</script>

Answer 1

使用asp.net：这是您将在selectedIndexChanged事件中使用的代码：

您可以创建一个列表（要为其显示面板的值），并检查该列表中是否存在所选值。

List<string> displayList = new List<string> { "1", "2", "3","4" };
GroupPanel.Visible = displayList.Contains(GroupButtons.SelectedValue) ? true : false;

由于这在不同的部分中重复，您可以使用get属性在业务对象中创建列表，并在后面的代码中使用它来检查值。

由于您现在已经更新了问题并且正在寻找客户端的内容，这可能有所帮助：

小提琴： http://jsfiddle.net/W4Km8/2174/

您的代码看起来如何：

 <div class="toggleDisplay">
            <asp:RadioButtonList ID="GroupButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="0" Selected="true" />
                <asp:ListItem Value="1" />
                <asp:ListItem Value="2" />
                <asp:ListItem Value="3" />
                <asp:ListItem Value="4" />
                <asp:ListItem Value="5" />
                <asp:ListItem Value="6" />
                <asp:ListItem Value="7" />
            </asp:RadioButtonList>
            <asp:Panel ID="GroupPanel" runat="server">
                <b>How can we improve our service?</b><br />
                <asp:TextBox ID="GroupTextBox" runat="server" />
            </asp:Panel>
        </div>

        <div class="toggleDisplay">
            <asp:RadioButtonList ID="EducationButtons" CellSpacing="5" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="0" Selected="true" />
                <asp:ListItem Value="1" />
                <asp:ListItem Value="2" />
                <asp:ListItem Value="3" />
                <asp:ListItem Value="4" />
                <asp:ListItem Value="5" />
                <asp:ListItem Value="6" />
                <asp:ListItem Value="7" />
            </asp:RadioButtonList>
            <asp:Panel ID="EducationPanel" runat="server">
                <b>How can we improve our service?</b><br />
                <asp:TextBox ID="TextBox1" runat="server" />
            </asp:Panel>
        </div>

描述：将按钮和面板放在一个带有toggleDisplay类的div中。这里重点是面板ID应该以“Panel”结尾，因为我们将在jquery中使用它。

这将是脚本标记中的内容：

    $(document).ready(function () {
        $(this).find("[id$='Panel']").hide();
        $(".toggleDisplay").change(function () {
            var groupName = $(this).find(":radio").attr('name');
            var ans = $('input[name="' + groupName + '"]:radio:checked').val();
            var displaylist = ["1", "2", "3", "4"];
            if (displaylist.indexOf(ans) > -1) {
                $(this).find("[id$='Panel']").show();
            } else {
                $(this).find("[id$='Panel']").hide();
            }
    });
});

因此，使用toggleDisplay类的任何内容都将触发此脚本。

根据所选的单选按钮显示面板

1 个答案: