1

我们有一个 asp.NET 页面，它以编程方式将数据添加为无序列表中的新列表项。

我想使用一些 jquery 来显示每个列表项的额外细节的滑动面板，但我使用的代码只显示了系列中的第一个（我猜是因为它们被称为相同的东西）.. 怎么做我添加一些条件来选择正确的？

这是代码：

 
$(文档).ready(函数(){

    $(".btn-slide").click(function(){
        $(this).slideToggle("slow");
        $(this).toggleClass("active"); 返回假；
    });

});
 

 
＃控制板 {
    背景：#754c24；
    高度：200px；
    显示：无；
}
。滑动 {
    边距：0；
    填充：0；
    边框顶部：实心 4px #422410;
    背景：#000 无重复中心顶部；
}
.btn 幻灯片 {
    背景：url(images/white-arrow.gif) 不重复右-50px；
    文本对齐：居中；
    宽度：144px；
    高度：31px；
    填充：10px 10px 0 0；
    边距：0 自动；
    显示：块；
    字体：粗体 120%/100% Arial、Helvetica、sans-serif；
    颜色：#fff;
    文字装饰：无；
}
。积极的 {
    背景位置：右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 元素的 ID 必须是唯一的，这样您的循环才会生成无效的 HTML。尝试为您的 DIV 分配一个类而不是一个 ID。

.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

你可以用 each 方法做到这一点......

$(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

将 div 更改为使用面板类而不是 id。

 <div class="panel">

然后像这样切换幻灯片：

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

这将获得存在于锚的父级中的具有类面板的 div。

于 2009-11-24T19:47:44.087 回答