Verwenden derselben Klasse, um die Click-Methode zu verwenden, um das nächste versteckte Element nach seiner Klasse zu zeigen

Question

Also habe ich viele verschiedene Lösungen für dieses Problem untersucht, aber keine scheint zu funktionieren.

Was ich versuche zu erreichen: Was ich versuche zu erreichen ist sehr einfach Ich habe eine Tabelle mit 2 Tabelle Body Tags. Der erste wird nur als Hauptinhalt angezeigt. Das letzte td-Element hat ein Anker-Tag, dieses Anker-Tag sollte beim Klicken das nächste tbody-Tag mit der Jquery-Methode slideToggle() anzeigen.

Problem: Das Problem, das ich habe, ist dies sind dynamisch erstellte Tabellen mit eckigen js. Wenn es also 5 Elemente gibt, dann gibt es 5 div Elemente mit jeweils einer Tabelle, die alle die gleiche Klasse für jeden tbody innerhalb des div haben. Dies ist sinnvoll, da für jeden einzelnen möchte ich die Click-Funktion zeigen, dass bestimmte Tabellen zweite div, wenn der Benutzer zusätzliche Inhalte im Zusammenhang mit diesem Element anzeigen möchte. .

Dinge versucht:

1. $ (this) .next ('test') slideToggle();
2. $ (dies) .closest ('tbody'). Find ('. Test'). SlideToggle();
3. $ (dies) .closet ('. Test'). SlideToggle();
4. $ (dies) .closest ('tr'). Find ('. Test'). SlideToggle();

Beiträge suchen in Stackoverflow für ähnliches Problem:

5. affect only the clicked element in jquery for multiple elements with same class
6. Using a class name in jQuery's .closest()

7. jQuery closest(); not working

8. Jquery adding click function to several spans with the same Class

Non Stackoverflow Seiten:

1. https://www.sitepoint.com/jquerys-closest-parents/

HTML:

<div class="productsList" ng-repeat="products in productListing.products"> 
    <div class="productSection"> 
     <div class="figureDiv"> 
      <figure class="img"> 
       <img ng-src="{{products.image}}" /> 
      </figure> 
     </div> 
     <div class="description"> 
      <h2 ng-bind="products.summary"></h2> 
      <summary ng-bind="products.description"></summary> 
     </div> 
     <table class="productTable"> 
      <tbody> 
       <tr><td><b>Product Name</b></td><td ng-bind="product.merchantName"></td></tr> 
       <tr><td><b>Valid:</b></td><td>{{products.validityStart}} to {{products.valididtyEnd}}</td></tr> 
       <tr><td><b>Product Type:</b></td><td>Appliance</td></tr> 
       <tr><td><b>Testing:</b></td><td>Yes<a class="testLink" href="">Show More &gt;</a></td></tr> 
      </tbody> 
      <tbody class="test"> 
       <tr><td><b>Extra</b></td><td>Extra</td></tr> 
       <tr><td><b>Extra</b></td><td>Extra</td></tr> 
       <tr><td><b>Extra</b></td><td>Extra</td></tr> 
       <tr><td><b>Extra</b></td><td>Extra</td></tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

JQUERY (Current Implementation):

function init() { 
    jQuery(document).ready(function(){ 

     $(document).on("click", ".productTable .testLink", function (ev) { 

     ev.stopImmediatePropagation(); 
     $(this).closest('tr').find('.test').slideToggle(); 
     $(".test").slideToggle(); 
    }); 
} 

visuell von dynamischen Inhalten (3 Beiträge):

Table class="productTable" 
    tbody 
     anchor tag class="testLink" 
    tbody class="test" 

Table class="productTable" 
    tbody 
     anchor tag class="testLink" 
    tbody class="test" 

Table class="productTable" 
    tbody 
     anchor tag class="testLink" 
    tbody class="test" 

Ending Wie Sie visuell sehen können gibt es drei Tabellen mit jeweils gleichen Klassen erstellt. Wenn der Benutzer also in der ersten Tabelle auf das Anchor-Tag klickt, wird das Body-Tag direkt danach in der entsprechenden Tabelle mit toggle angezeigt.Nur das sollte man nicht alle zeigen, was das aktuelle Problem ist.

Jede Hilfe wird sehr geschätzt, versuchte viele Lösungen, aber nichts funktioniert, jede Implementierung macht alle von ihnen umschalten, was schrecklich ist. Danke im Voraus!

Answer 1

Ich denke so etwas.

$(".productTable .testLink").on("click", function() { 
 
    $(this).parents('.productTable').children('.test').slideToggle(); 
 
    });

.testLink { 
 
    color: blue; 
 
    text-decoration: underline; 
 
} 
 
.test { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="productTable"> 
 
    <tbody> 
 
    <tr> 
 
     <td><b>Product Name</b> 
 
     </td> 
 
     <td ng-bind="product.merchantName"></td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Valid:</b> 
 
     </td> 
 
     <td>{{products.validityStart}} to {{products.valididtyEnd}}</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Product Type:</b> 
 
     </td> 
 
     <td>Appliance</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Testing:</b> 
 
     </td> 
 
     <td>Yes<span class="testLink">Show More &gt;</span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody class="test"> 
 
    <tr> 
 
     <td><b>Extra</b> 
 
     </td> 
 
     <td>Extra</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Extra</b> 
 
     </td> 
 
     <td>Extra</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Extra</b> 
 
     </td> 
 
     <td>Extra</td> 
 
    </tr> 
 
    <tr> 
 
     <td><b>Extra</b> 
 
     </td> 
 
     <td>Extra</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

denke ich, das Problem in dieser Zeile Ihrer jQuery ist $(".test").slideToggle(); wie es slideToggle auf alle .test Versuch ausführen wird es zu entfernen. Aktualisieren Sie auch .closest('tr'); zu .closest('table'); als .test ist in der Tabelle Tag nicht die tr

Answer 3

Von dem, was ich mache aus, die Sie suchen .next() Methode des JQuery. Nur für das Stamm tbody und .next()

Beispiel

$('.testLink').parentsUntil('tbody').next().show();