需要在jquery中减少/简化此代码

Question

这里我添加了asp.net代码和全局变量以及元素的jquery条件，这段代码对我来说很好，但我希望简化这段代码。任何人都可以帮忙吗？

Asp.net

    <div class="toggle_container">
            <p>
                <asp:HiddenField ID="hdnIsSwipe" runat="server" />
                <asp:Label ID="lblPaymentType" runat="server" Text="<span>*</span> Payment Type"
                    AssociatedControlID="ddlPaymentType"></asp:Label>
                <asp:DropDownList ID="ddlPaymentType" runat="server">
                </asp:DropDownList>
            </p>
            <p>
                <asp:Label ID="lblAccountNumber" runat="server" Text="<span>*</span> Account Number"
                    AssociatedControlID="txtAccountNumber"></asp:Label>
                <asp:TextBox ID="txtAccountNumber" runat="server" MaxLength="17" Style="width: 155px;"></asp:TextBox>
                <asp:HiddenField ID="hdnAccountNo" runat="server" />
                <asp:LinkButton ID="btnSwipe" runat="server" CausesValidation="false" OnClientClick="tb_show('Swipe','#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=false');return false;"
                    Visible="true" Text="Swipe" CssClass="btnSwipe">

                </asp:LinkButton>
                <input id="btnClear" type="button" class="btnClear" name="Click and clear Account Data" />
            </p>
            <p>
                <asp:Label ID="lblAmount" runat="server" Text="<span>*</span> Amount" AssociatedControlID="txtAmount"></asp:Label><asp:TextBox
                    ID="txtAmount" runat="server" MaxLength="8"></asp:TextBox>
            </p>

            <p>
                <asp:Label ID="lblCVV2" runat="server" Text="CVV2" AssociatedControlID="txtCVV2"></asp:Label><asp:TextBox
                    ID="txtCVV2" runat="server" MaxLength="4"></asp:TextBox></p>
            <p>
                <asp:Label ID="lblReferenceNumber" runat="server" Text="Reference Number" AssociatedControlID="txtReferenceNumber"></asp:Label><asp:TextBox
                    ID="txtReferenceNumber" runat="server" MaxLength="50"></asp:TextBox></p>
            <p>
                <asp:Label ID="lblSaleTaxAmount" runat="server" Text="<span>*</span> Sale Tax Amount"
                    AssociatedControlID="txtSaleTaxAmont">
                </asp:Label><asp:TextBox ID="txtSaleTaxAmont" runat="server" MaxLength="10"></asp:TextBox></p>
            <p>
                <asp:Label ID="lblPoNumber" runat="server" Text="<span>*</span> PO Number" AssociatedControlID="txtPoNumber">
                </asp:Label><asp:TextBox ID="txtPoNumber" runat="server" MaxLength="20"></asp:TextBox></p>
            <p>
                <asp:Label ID="lblTaxType" runat="server" Text="<span>*</span> Tax Type" AssociatedControlID="ddlTaxType"></asp:Label>
                <asp:DropDownList ID="ddlTaxType" runat="server">
                </asp:DropDownList>
            </p>
        </div>

全局变量

    var lblSaleTaxAmount = '#<%=lblSaleTaxAmount.ClientID %>';
    var txtSaleTaxAmont= '#<%=txtSaleTaxAmont.ClientID %>';
    var lblPoNumber = '#<%=lblPoNumber.ClientID %>';
    var txtPoNumber= '#<%=txtPoNumber.ClientID %>';
    var lblTaxType = '#<%=lblTaxType.ClientID %>';
    var ddlTaxType ='#<%=ddlTaxType.ClientID %>';

Jquery代码

    $(ddlPaymentType).change(function(){
        if($(ddlPaymentType).val()=='1' || $(ddlPaymentType).val()=='-1'  )
        {
            $(lblSaleTaxAmount).hide();
            $(txtSaleTaxAmont).hide();
            $(lblPoNumber).hide();
            $(txtPoNumber).hide();
            $(lblTaxType).hide(); 
            $(ddlTaxType).hide(); 

            $("label[for='ContentSection_txtSaleTaxAmont']").hide(); 
            $("label[for='ContentSection_txtPoNumber']").hide();  
        }
        else
        {
            $(lblSaleTaxAmount).show();  
            $(txtSaleTaxAmont).show();
            $(lblPoNumber).show(); 
            $(txtPoNumber).show();
            $(lblTaxType).show(); 
            $(ddlTaxType).show();
        }
    });

Answer 1

您可以使用逗号分隔所有选择器来使用一个hide()函数：

$(lblSaleTaxAmount, 
  txtSaleTaxAmont, 
  lblPoNumber, 
  txtPoNumber, 
  lblTaxType, 
  ddlTaxType)
.hide();

或者，如果您将它们放在div#foo之类的父元素中，您只需执行以下操作：

$('#foo').children().hide();

Answer 2

如果您需要一次隐藏标签和文字，可以在其周围添加<div>标签，并使用div的ID同时隐藏标签和文字

编辑：新评论后的其他信息

您还可以将类添加到需要一次隐藏的控件中。就像示例一样，添加一个名为hidinggroup的类。然后在你的CSS中（假设你使用CSS）为第二个类创建一个条目，用于隐藏，例如.hideme { ... }

要隐藏项目，您可以执行类似

的操作

 $('.hidinggroup').addClass('hideme');

要取消隐藏它们，你可以做到

 $('.hidinggroup').removeClass('hideme');

hideme类必须包含用于以您希望的方式隐藏控件的标记...例如visibility: hidden;或display: none;