2017-01-27 50 views
0

我試圖調整一個div的按鈕點擊,使用JavaScript和jQuery。這些都在asp.net web表單中。我幾乎沒有使用JavaScript的經驗,幾乎沒有與jQuery的經驗。這是迄今爲止我在其他SO成員的幫助下的代碼。除了不工作,我知道有什麼問題,因爲警報沒有顯示。動態調整div w/javascript和jquery?

任何幫助表示讚賞。

<head id="Head1" runat="server"> 
    <title>Data Display</title> 
    <script type="text/javascript"> 
     function toggleGridContent() { 
      var id = "#gridViewContainer"; 
      if ($(id).hasClass("small")) { 
       alert("found"); 
       $(id).attr("class", "large"); 
      } else { 
       alert("not"); 
       $(id).attr("class", "small"); 
      } 
     } 
    </script> 
    <style type="text/css"> 
     .small { 
      height: 200px; 
      overflow: hidden; 
     } 

     .large { 
      height: auto; 
     } 
    </style> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 

    <input type="button" onclick="toggleGridContent()" value="toggleGridContent" /> 

    <div class="small" id="gridViewContainer" style="border: 1px solid red"> 
     <asp:GridView ID="GridViewNsbAll" AutoGenerateColumns="false" runat="server"> 
      <Columns> 
       <asp:BoundField DataField="subgroup" HeaderText="subgroup"></asp:BoundField> 
       <asp:BoundField DataField="count" HeaderText="count"></asp:BoundField> 
      </Columns> 
     </asp:GridView> 
    </div> 

</form> 
</body> 
</html> 

回答

2

您必須添加對jQuery庫的引用。如果您在您的網站有它,你可以使用這樣的事情:

<script type="text/javascript" src="jquery.js"></script> 

更容易將鏈接到最新的託管版本

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
+0

是的,就是這樣。非常感謝。 – rbhat