0

リスト（myList）のリスト項目をクリックすると、サーバーからデータをロードするdivがあります。そのため、私のリストはページの左側にあり、クリックすると、結果 (表の行としてレンダリングされたアイテムのリストでもあります) が右側に表示されます。構造は次のとおりです。

ページの左側:

<ul id="myList">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
</ul>

ページの右側:

<div id="myDiv">
  <table style="width:100%;">
    <tr><td>data1</td></tr>
    <tr><td>data2</td></tr>
    . 
    .
    .
    .
    .
  </table>
</div>

データはサーバーから送信されるため、行の長さは可変です。

div 'myDiv' をスクロール可能にする必要があったため、次のようなスタイルを設定しました。

#myDiv { overflow: auto; height: 550px; }

ここで、この div をページの一番下まで拡張する必要があるため、次のように高さを計算し、jquery で設定しています。

$(document).ready(function () {
     UpdateDivHeight();

     $(window).resize(function () {

       UpdateDivHeight();

     });

  function UpdateDivHeight() {
       //update div height
       var viewport_ht = $(window).height();
       //other relevant code

       var cal_ht = *; //calculating height here, viewport_ht - blah blah;

       $('#myDiv').height(cal_ht);
       $('#myDiv').css("height", cal_ht + "px !important;");
     }
});

私が直面している問題は、最初にページにアクセスしたとき、またはブラウザーウィンドウのサイズを変更したときに高さを正しく設定しますが、同じページのリストアイテムをクリックすると、高さを正しく計算します (アラートで検証されます) )、css スタイルで上書きされ、再び 550px に設定されます。

編集：

データが入ってくると、For Each ブロックを使用してページに挿入します

<div id="myDiv">
 <table class="myTable" style="width:100%">
    @For Each item In Model

      @<tr>
        <td>@item.Name<br />
              <span style="font-size:0.7em;">@item.City, @item.egion</span>
        </td>
      </tr>

    Next
 </table>
</div>

それを克服する方法はありますか？

4

1 に答える 1

4

jQuery CSS アプリケーションは無効であり、無視されています。

   $('#myDiv').css("height", cal_ht + "px !important;");

次のようにする必要があります。

   $('#myDiv').css("height", cal_ht + "px");

jQuery は style 属性 (スタイルシート リソースの後に適用される) を介して CSS プロパティを適用するため、!importantフラグは不要です。

それを削除すると、jQuery が の高さを適用することになりcal_ht + "px;"ます。たとえば、cal_ht の値が 123 だった場合、jQuery が123px;有効な高さの値ではない高さ を適用しようとしていることを意味します。ただし、123pxは有効な高さであるため、セミコロンが原因で jQuery 関数が失敗します。

2 つの jQuery CSS 呼び出しの違いを示すjsFiddleを次に示します。

于 2013-08-02T19:16:06.730 に答える