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进行错误的比较。如果方法＆amp;中没有传递任何值，则返回文本。如果有值，则设置文本。

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

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

试试这个，似乎工作正常：

Untrusted Mandatory Level

（jQuery）点击更改文字

4 个答案: