Несколько раздвижных панелей JQuery на одной странице
Вопрос
У нас есть страница asp.NET, которая программно добавляет данные в виде новых элементов списка в неупорядоченный список.
Я хочу использовать 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>
Решение
Измените 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;
});
);
});
Идентификаторы HTML-элементов должны быть уникальными, чтобы ваш цикл создавал недопустимый HTML.Попробуйте назначить класс вместо идентификатора вашему 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;
});
});