لوحات انزلاقية متعددة jQuery على نفس الصفحة

Question

لدينا صفحة 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>

Answer 1

قم بتغيير DIV لاستخدام فئة لوحة بدلاً من المعرف.

 <div class="panel">

ثم تبديل الشريحة مثل هذا:

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

سيحصل هذا على Div مع لوحة الفصل الموجودة في والد أحد الوالدين.

Answer 2

يمكنك القيام بذلك مع كل طريقة ...

$(document).ready(function(){
    $(".btn-slide").each(
        function(){ $(this).click(function(){
         $(this).slideToggle("slow");
         $(this).toggleClass("active"); return false;
        });
    );
});

Answer 3

يجب أن تكون معرفات عناصر 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;
    });

});