javascript - JQuery Toggle Display with less code

Question

I'm new to JQuery and learning this myself. I want to toggle my display using the least amount of code. My code currently works but I'm sure there is a better way. Cheers.

    <div id="container">
    <asp:Panel runat="server" ID="pnlHeader">
    <asp:RadioButton runat="server" ID="radOne" GroupName="myRadGroup" Text="One"      value="1" onclick="ToggleMyDisplay();" />
    <asp:RadioButton runat="server" ID="radTwo" GroupName="myRadGroup" Text="Two" value="2" onclick="ToggleMyDisplay();" />
    <asp:RadioButton runat="server" ID="radThree" GroupName="myRadGroup" Text="Three"  value="3" onclick="ToggleMyDisplay();" />
    <asp:RadioButton runat="server" ID="radFour" GroupName="myRadGroup" Text="Four"  value="4" onclick="ToggleMyDisplay();" />

    <div>
        <label for="ddlOne" id="lblOne">DDL One:</label>
        <asp:DropDownList ID="ddlOne" runat="server"></asp:DropDownList>
    </div>

</asp:Panel>

<asp:Panel runat="server" ID="pnlOne" Style="display: none;"> 
    <div>   
        <label for="ddlTwo">To:</label>            
            <asp:DropDownList ID="ddlTwo" runat="server"></asp:DropDownList>
    </div>       
</asp:Panel>

<asp:Panel runat="server" ID="pnlTwo" Style="display: none;">
    <div>
        <label for="txtMyText">My Text:</label>
        <asp:TextBox ID="txtMyText" runat="server"></asp:TextBox>            
    </div>
</asp:Panel>


<asp:Panel runat="server" ID="pnlThree" CssClass="fieldsLarge" Visible="true">
    <table>
        <tr>
            <td rowspan="3" style="width: 775px">
                <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>                    
            </td>
            <td style="text-align: right;">
                <asp:Button ID="btnContinue" runat="server" Text="Button" Visible="false" />
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">
                <asp:Button ID="btnExit" runat="server" Text="Button" Visible="false" />
            </td>
        </tr>
        <tr>
            <td style="text-align: right;">
                <asp:Button ID="btnSave" runat="server" Text="Button" Visible="false" />
            </td>
        </tr>
    </table>
</asp:Panel>

Here is the JQuery I have at the moment

    function ToggleMyDisplay() {

    if ($("#radOne").attr("checked") !== "undefined" && $("#radOne").attr("checked") === "checked") {
        MyLabel.text('First Radio Selected:');
        $("#pnlOne").hide();
        $("#pnlTwo").hide();
        $("#btnContinue").hide();
        $("#btnExit").hide();
        $("#btnSave").show();

    }

    else if ($("#radTwo").attr("checked") !== "undefined" && $("#radTwo").attr("checked") === "checked") {
        MyLabel.text('Second Radio Selected:');
        $("#pnlOne").hide();
        $("#pnlTwo").hide();
        $("#btnContinue").hide();
        $("#btnExit").hide();
        $("#btnSave").show();

    }

    else if ($("#radThree").attr("checked") !== "undefined" && $("#radThree").attr("checked") === "checked") {
        MyLabel.text('Third Radio Selected:');
        $("#pnlOne").show();
        $("#pnlTwo").show();
        $("#btnContinue").show();
        $("#btnExit").hide();
        $("#btnSave").show();

    }

    else if ($("#radFour").attr("checked") !== "undefined" && $("#radFour").attr("checked") === "checked") {
        MyLabel.text('F:');
        $("#pnlOne").show();
        $("#pnlTwo").show();
        $("#btnContinue").show();
        $("#btnExit").hide();
        $("#btnSave").show();     
    }  
}

Answer 1

First idea: uses html class and function toggle for all elements which will change instead of uses id on few elements:

Exemple:

$("#pnlOne").show();
$("#pnlTwo").show();
$("#btnContinue").show();
$("#btnExit").hide();
$("#btnSave").show();

Becomes:

$(".elementChanged").toggle();

Answer 2

您可以使用多个选择器：

http://api.jquery.com/multiple-selector/

Answer 3

有些事情值得考虑。您正在使用 ASP.Net 控件，然后使用带有 id 的 javascript 访问它们。例如，当 ASP.Net 呈现页面时，面板将呈现为 html div 元素。ASP.Net 控件的 ID 属性并不总是直接呈现为 html 中的 div 元素 id 属性。因此，如果您的页面更复杂，您的代码将无法正常工作。如果您不需要访问服务器端代码上的面板，只需首先将其替换为 div ：

<asp:Panel runat="server" ID="pnlTwo" Style="display: none;">
</asp:Panel>

->

<div id="pnlTwo" style='display: none;'>
</div>

如果您确实需要在服务器端访问这些控件，您可以做的一件事是使用clientIdMode-property并将其设置为静态。或者您可以使用 css-classes 从 html 中找到正确的 div：

  <asp:Panel runat="server" ID="pnlTwo" CssClass="myClass">
    </asp:Panel>

呈现为

<div id="pnlTwo" class="myClass">
</div>

你可以在课堂上找到它

$(".MyClass")...

您还应该使用prop-function来检查是否选中了单选按钮或复选框：

if ($("#myCheckbox").prop("checked") === true) {
}

还有一个提示：如果你想对许多元素做同样的事情，你可以使用 or-selector：

$("#pnlOne, #pnlTwo, #btnContinue, #btnExit").hide();

或者，如果所有元素都具有相同的父元素，则可以隐藏父元素，从而隐藏所有子元素。

希望这可以帮助！

Answer 4

尝试使用data-*html5 可用的属性：

http://jsfiddle.net/eH5ru/1/

出于示例的目的，我使用了普通的 html 元素，而不是ASP.NET 控件。但这个概念仍然适用。

我添加了一个data-show包含 jquery 选择器的属性，在这种情况下，它是一个类名，您可以使用它来确定要隐藏哪些元素以及要显示哪些元素。

$('input[type=radio]').on('change', function () {
    if (this.checked) {
        var showSelector = $(this).data('show');
        $('.display-part').hide();
        $(showSelector).show();
    }
});

这将使将来更容易添加/删除面板。