jQuery的多個用戶控件實例

Question

我在頁面中使用多個用戶控件實例。 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> 

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/