Question

我是JQuery的新手并且自己学习。我想用最少量的代码切换我的显示。我的代码目前有效，但我确信有更好的方法。欢呼声。

    <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>

这是我目前的JQuery

    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

第一个想法：使用html类和函数切换所有将改变的元素，而不是在少数元素上使用id：

例：

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

变为：

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

Answer 2

您可以使用多个选择器：

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

Answer 3

有些事情值得考虑。您正在使用ASP.Net控件，然后使用带有id的javascript访问它们。例如，当ASP.Net呈现页面时，面板将呈现为html div元素。 ASP.Net-control的ID属性并不总是直接呈现为html中的div-elements id-attribute。因此，如果您的页面更复杂，您的代码将无效。如果您不需要访问服务器端代码上的面板，只需将其替换为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检查是否选中了radiobutton或复选框：

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

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

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

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

希望这有帮助！

Answer 4

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

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

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

我添加了一个data-show属性，其中包含一个jquery选择器，在这个例子中，它是一个类名，通过它你可以确定要隐藏哪些元素以及要显示哪些元素。

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

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

JQuery Toggle显示更少的代码

4 个答案: