複数のJquery摺動パネルに同じページ
質問
しておりasp.NET ページはprogrammaticalyのデータの追加としてリスト項目の順序付けリスト..
使いたいもjqueryをスライドパネルのキーワードが各一覧の項目のコードを使用していだけの最初のシリーズとしての私の推測であれ同じもの)..方法の追加に一定の条件を選択は正しい。
こちらのコード:
$(document).ready(function(){ $(".btn-slide").click(function(){ $(this).slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); #panel { background: #754c24; height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: #000 no-repeat center top; } .btn-slide { background: url(images/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 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>
解決
変更用パネルのクラスの代わりに、IDへのdivます。
<div class="panel">
次に、このようなスライド切り替えます:
$('.panel', $(this).parent().parent()).slideToggle("slow");
このアンカーの親の親に存在するクラスパネルとdiv要素を取得します。
他のヒント
あなたの各方法でそれを行うことができます...
$(document).ready(function(){
$(".btn-slide").each(
function(){ $(this).click(function(){
$(this).slideToggle("slow");
$(this).toggleClass("active"); return false;
});
);
});
IdのHTML要素で一意でなければならないのでループを製造して無効なHTML.試割り当クラスの代わりに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;
});
});
所属していません StackOverflow