jQuery replaceWith() $ this

Question

Ich muss "Antworten anzeigen" ausblenden, wenn ich klicke, um sie anzuzeigen. Das Problem ist, dass wenn ich auf "Antworten anzeigen" klicke, alle "Antworten anzeigen" -Schaltflächen ausblenden. Ich muss nur dasjenige verstecken, auf das ich klicke. Dies ist der jQuery-Code:

  $(".replies_show").click (function(e){ 
      $(".replies_show").replaceWith(" "); 
      $(this).next(".replies").show(); 
      e.preventDefault(); 
     }); 

Answer 1

$(".replies_show") alle Elemente wählt die Klasse mit, damit Sie alle sind auswählen und dann replaceWith auf alle von ihnen wieder anwenden. Jedoch bezieht sich this innerhalb dieser Rückruffunktion auf das gerade angeklickte Element (d. H. Das einzige angeklickte Element, nicht alle von ihnen).

Verwenden Sie nicht replaceWith Funktion nur zum Ausblenden eines Elements, verwenden Sie stattdessen .

So ersetzen

$(".replies_show").replaceWith(" "); 

Mit

$(this).hide(); 

Answer 2

können Sie this verwenden das aktuelle Element zu erhalten. Andernfalls wählen Sie alle Elemente mit der Klasse .replies_show aus.

$('.replies_show').on('click', function(e, el) { 
 
    $(el).replaceWith(' '); // Does what you're looking for 
 

 
    $(el).hide(); // Might be better, depending on what you're doing 
 
    
 
    $(this).next('.replies').show(); 
 
    
 
    e.preventDefault(); 
 
});

Answer 3

Verwenden .hide() Funktion nicht .replaceWith()

$(".replies_show").click (function(e){ 
      $(this).hide(); 
      $(this).next(".replies").show(); 
      e.preventDefault(); 
     }); 

Answer 4

Wie Sie nur clicked Artikel Ziel benötigen, so dass Sie $(this) in Callback-Funktion verwenden müssen, so etwas wie unten:

$(".replies_show").click (function(e){ 
    var $this = $(this); // cache $(this)/clicked element 

    $this.hide();   // clicked item will be hide (display: none) 
    $this.next(".replies") // next matched item of clicked item 
     .show();   

    e.preventDefault(); 
});