(jQuery) Ändern Sie den Text bei Klick

Question

Ich versuche, Text bei Klick zu ändern. Klicken Sie zuerst auf "show", dann klicken Sie auf "hide". Ich kann nicht herausfinden, was hier falsch ist.

$(document).ready(function() { 
    $(".card-link:first").click(function() { 
if ($(".card-link:first").text('Show comments')) { 
$("ul.list-group.list-group-flush").show(); 
$(".card-link:first").text('Hide comments'); 

} else if ($(".card-link:first").text('Hide comments')) { 
$("ul.list-group.list-group-flush").hide(); 
$(".card-link:first").text('Show comments'); 
} 
    }); 
}); 

JSfiddle: https://jsfiddle.net/eyc4kxzm/6/

Answer 1

text() setzt nur den Text, nicht den aktuellen Wert überprüft. Sie stellen jedes Mal "Kommentare anzeigen" ein und text() gibt diesen Wert zurück, so dass if erfolgreich ist und der innere Block aufgerufen wird.

Test was text()gibt stattdessen zurück.

$(document).ready(function() { //Hide comments before first click 
 
    $("ul.list-group.list-group-flush").hide(); 
 

 
    $(".card-link:first").click(function() { 
 

 
    if ($(".card-link:first").text() === 'Show comments') { 
 
     $("ul.list-group.list-group-flush").show(); 
 
     $(".card-link:first").text('Hide comments'); 
 
    } 
 
    else if ($(".card-link:first").text() === 'Hide comments') { 
 
     $("ul.list-group.list-group-flush").hide(); 
 
     $(".card-link:first").text('Show comments'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="card" style="width: 40em; margin: 0 auto;"> 
 

 
    <div class="card-block"> 
 
     <a href="#/" class="card-link">Show comments</a> 
 

 
    </div> 
 
    <ul class="list-group list-group-flush"> 
 
     <li class="list-group-item"> 
 
     <div class="w-100"> 
 
      <h5>List group item heading</h5> 
 
     </div> 
 
     <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Sie den falschen Vergleich von text tun. Es gibt den Text zurück, wenn in der Methode kein Wert übergeben wird. & setzt den Text, wenn ein Wert vorhanden ist.

$(document).ready(function() { //Hide comments before first click 
     $("ul.list-group.list-group-flush").hide(); 
     $(".card-link:first").click(function() { 
     if ($(".card-link:first").text() == 'Show comments') { 
      $("ul.list-group.list-group-flush").show(); 
      $(".card-link:first").text('Hide comments'); 
     } else if ($(".card-link:first").text() == 'Hide comments') { 
      $("ul.list-group.list-group-flush").hide(); 
      $(".card-link:first").text('Show comments'); 
     } 
    }); 
    }); 

Answer 3

Da Sie bereits jQuery verwenden, Sie jQuery onDocument Last verwenden können. Außerdem ist es in der Regel sauberer, Klassen hinzuzufügen/zu entfernen, um zu prüfen, ob Text gleich ist.

$(function() { 

    $("ul.list-group.list-group-flush").hide(); 

     $(".card-link:first").click(function() { 

     if ($(".card-link:first").hasClass("show-comments")) { 
      $("ul.list-group.list-group-flush").hide(); 
      $(".card-link:first").text('Show comments'); 
      $(".card-link:first").removeClass("show-comments"); 
     } else { 
      $("ul.list-group.list-group-flush").show(); 
      $(".card-link:first").text('Hide comments'); 
      $(".card-link:first").addClass("show-comments"); 
     } 

    }); 

}); 

Answer 4

die Sie interessieren, scheint gut zu funktionieren:

$(".card-link:first").click(function() { 
    if ($(".card-link:first").text()==='Show comments') { 
     $("ul.list-group.list-group-flush").show(); 
     $(".card-link:first").text('Hide comments'); 
    } else { 
     $("ul.list-group.list-group-flush").hide(); 
     $(".card-link:first").text('Show comments'); 
    } 
    }