1

順序付けられていないリストに新しいリスト項目としてデータをプログラムで追加するasp.NETページがあります。

jqueryを使用して、各リスト項目の追加詳細のスライドパネルを表示したいのですが、使用しているコードはシリーズの最初のものしか表示していません(同じものと呼ばれているため推測しています)..正しいものを選択するためにいくつかの条件を追加しますか?

コードは次のとおりです。

 
$(document).ready(function(){

    $(".btn-slide").click(関数(){
        $(this).slideToggle("slow");
        $(this).toggleClass("アクティブ"); false を返します。
    });

});
 

 
#パネル {
    背景: #754c24;
    高さ: 200px;
    表示: なし;
}
。滑り台 {
    マージン: 0;
    パディング: 0;
    border-top: solid 4px #422410;
    背景: #000 ノーリピート センター トップ。
}
.btn-スライド {
    背景: url(images/white-arrow.gif) no-repeat right -50px;
    テキスト整列: 中央;
    幅: 144px;
    高さ: 31px;
    パディング: 10px 10px 0 0;
    マージン: 0 自動;
    表示ブロック;
    フォント: 太字 120%/100% Arial、Helvetica、sans-serif。
    色: #fff;
    テキスト装飾: なし;
}
。アクティブ {
    background-position: 右 12px;
}



    <% foreach( var registration in ViewModel ) { %>
            <li>
             Event: <%= registration.Event.Name %>
             Date: <%= registration.Event.Date.ToLongDateString() %>
             <div id="panel">
              <% if ( registration.HasResult )  { %>
                 Your result for this event:
                 Place: <%= registration.Result.Place %>
                 Time: <%= registration.Result.Time %>
                 Average Pace: <%= registration.Result.AveragePace %>
              <% } else { %>
                 No results have been posted for this event.

              <% } %>
              </div>                  
              <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
            </li>            
    <% } %>
</ul>

4

3 に答える 3

0

ループが無効な HTML を生成するように、HTML 要素の ID は一意である必要があります。ID の代わりにクラスを DIV に割り当ててみてください。

.panel {
    background: #754c24;
    height: 200px;
    display: none;
}

<% foreach( var registration in ViewModel ) { %>

    <li>
     Event: <%= registration.Event.Name %>
     Date: <%= registration.Event.Date.ToLongDateString() %>
     <div class="panel">
      <% if ( registration.HasResult )  { %>
         Your result for this event:
         Place: <%= registration.Result.Place %>
         Time: <%= registration.Result.Time %>
         Average Pace: <%= registration.Result.AveragePace %>
      <% } else { %>
         No results have been posted for this event.
      <% } %>
      </div>
      <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
     </li>
<% } %>

更新：また、あなたのJavaScriptは正しく見えません：

$(document).ready(function(){

    $(".btn-slide").click(function(){
        $(this).closest('li').find('.panel').slideToggle("slow");
        $(this).toggleClass("active");
         return false;
    });

});
于 2009-11-24T19:35:42.813 に答える
0

各メソッドでそれを行うことができます...

$(document).ready(function(){
    $(".btn-slide").each(
        function(){ $(this).click(function(){
         $(this).slideToggle("slow");
         $(this).toggleClass("active"); return false;
        });
    );
});
于 2009-11-24T19:38:05.727 に答える
0

id の代わりにパネルのクラスを使用するように div を変更します。

 <div class="panel">

次に、次のようにスライドを切り替えます。

 $('.panel', $(this).parent().parent()).slideToggle("slow");

これにより、アンカーの親の親に存在するクラス パネルを含む div が取得されます。

于 2009-11-24T19:47:44.087 に答える