使用 jquery 的用户控件的多个实例答案

【问题标题】：Multiple instances of user controls with jquery使用 jquery 的用户控件的多个实例
【发布时间】：2015-06-04 07:17:11
【问题描述】：

我在一个页面中使用了多个用户控件实例。 Jquery 效果只有第一个用户控件和所有其他用户控件得到 “第一个用户控件”设计发生了变化。

请问我该如何解决？

这是我的用户控件：

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>

【问题讨论】：

您应该将一个类或 id 传递给创建 DOM 元素实例的函数。这样您就可以唯一地引用每个调用。

标签： jquery webusercontrol

【解决方案1】：

试试这个：

$(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");
        }

   });
});

【讨论】：

【解决方案2】：

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

【讨论】：