Question

我在页面中使用多个用户控件实例。 Jquery只影响第一个usercontrol和所有其他用户控件＆＃34;第一个用户控件＆＃34;设计变更。

请问我该如何解决这个问题？

这是我的UserControl：

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

试试这个：

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

   });
});

Answer 2

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

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

2 个答案: