（jQuery）クリック時にテキストを変更します。

Question

私はクリック時にテキストを変更しようとしています。最初に"show"をクリックし、次に"hide"をクリックします。ここで何が間違っているのか分かりません。

$(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()は現在の値をチェックしません。毎回「コメントを表示」を設定していて、text()がその値を返しているので、ifが成功し、その内部ブロックが呼び出されます。

テスト内容text()は、代わりにを返します。

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

あなたはtextの間違った比較を行っています。メソッド内に値が渡されない場合はテキストを返します。値がある場合は&がテキストを設定します。

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

すでにjQueryのを使用しているので、あなたはjQueryのonDocument負荷を使用することができます。さらに、クラスが追加/削除されると、テキストが等しいかどうかチェックするのが一般的です。

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

これを試してみては、正常に動作しているようだ：

$(".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'); 
    } 
    }