jquery 的用户控件的多个实例

Question

我在一个页面中使用了多个用户控件实例。 Jquery 仅影响第一个用户控件和所有其他用户控件 "first user control" 设计更改。

请问我该如何解决？

这是我的用户控件：

Jquery

 $(document).ready(function () {

        if ($(".SubCompanyTypes").is(":visible")) {
            $(".MainCompanyTypes").css("width", "240px");
            $(".SubCompanyTypes").css("width", "96px");
        }

        else
        {
            $(".MainCompanyTypes").css("width", "70px");
            $(".SubCompanyTypes").css("width", "96px");
        }

    });




 <asp:DropDownList ID="ddlMainCompanyTypes" runat="server" Width="342px"  CssClass="MainCompanyTypes"
                    OnSelectedIndexChanged="ddlMainCompanyTypes_SelectedIndexChanged"
                    AutoPostBack="true">
                    <asp:ListItem Text="-Select-" Value="" />
                </asp:DropDownList>

   <asp:DropDownList ID="ddlSubCompanyTypes" runat="server" Width="300px" Visible="false"  CssClass="SubCompanyTypes"
                    AutoPostBack="true" 
OnSelectedIndexChanged="ddlSubCompanyTypes_SelectedIndexChanged">
                </asp:DropDownList>

Answer 1

您可以使用 .each() 方法来完成此操作。请参考：https://api.jquery.com/each/

Answer 2

试试这个：

$(document).ready(function () {
$(".SubCompanyTypes").each(function(){
    if ($(this).is(":visible")) {
           // $(".MainCompanyTypes").css("width", "240px");
           // for .MainCompanyTypes check the previous control and apply css
             $(this).prev('.MainCompanyTypes').css("width", "240px");
             $(this).css("width", "96px");
        }
        else
        {
           // $(".MainCompanyTypes").css("width", "70px");
              $(this).prev('.MainCompanyTypes').css("width", "70px");
              $(this).css("width", "96px");
        }

   });
});

jquery 的用户控件的多个实例

Multiple instances of user controls with jquery

jquery

webusercontrol