Mehrere JQuery Schiebewände auf derselben Seite

Question

Wir haben eine asp.NET Seite, die programmaticaly die Daten als neue Listenelemente in einer ungeordneten Liste hinzugefügt ..

Ich mag einige Jquery verwenden, um eine Schiebewand von zusätzlichen Details für jedes Listenelement zu zeigen, aber der Code, den ich nur mit bin die erste in der Reihe zeigt (wie ich vermute, weil sie die gleiche Sache genannt werden). . Wie füge ich einige Bedingungen für die richtige wählen?

Hier ist der Code:

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

Ändern Sie den div Gebrauch Klasse Panel anstelle von id.

 <div class="panel">

Dann Umschalten der Folie wie folgt aus:

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

Dies wird die div mit Klasse-Panel erhalten, die in der übergeordneten des Ankers der Eltern vorhanden ist.

Answer 2

Sie können das tun mit der jeder Methode ...

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

Answer 3

IDs von HTML-Elementen muss eindeutig sein, damit Ihre Schleife ungültig HTML erzeugt. Versuchen Sie die Zuweisung einer Klasse anstelle einer ID zu Ihrem 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>
<% } %>

Aktualisiert : Auch Ihr Javascript sieht nicht richtig:

$(document).ready(function(){

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

});