javascript - 单击它时如何更改一个按钮文本不是所有具有相同类的按钮

Question

我正在开发通过按钮添加帖子的发布系统，添加的帖子有两个按钮，一个用于显示/隐藏内容，另一个用于删除内容。我使用 jQUERY 事件 slideToggle 来隐藏和显示内容，并将按钮上的文本从显示更改为隐藏，反之亦然，但是与同一类相关的帖子的所有按钮的文本都在不单击它们的按钮的情况下更改了。我需要更改按钮文本时点击它

$(document).ready(function() {
  $("body").on("click", ".view", function() {
    $(this).parent().siblings(".card-body").slideToggle(2000, function() {
      if ($(this).css("display") == "none") {
        $(".view").text(' Show');
      } else {
        $(".view").text(' Hide');
      }
      $(".view").toggleClass("fa-eye-slash");
    });
  });

  var i = 1
  $("body").on("click", "input.btn-primary", function() {
    var x = $("textarea").val();
    var title = $("#title").val();
    var article = $('<div class="card" id="article-' + i + '"><div class="card-header"> <div class="card-text text-center"><h5> ' + title + ' </h5></div></div><div class="card-body"><div class="card-text text-justify"><p>' + x + '</p> </div> </div> <div class="card-footer text-right"> <button class="btn btn-primary view fas fa-eye">  Hide</button> <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button> </div> </div>');
    $(".card-columns").append(article);
    i++;
  });
  
  $("body").on("click", ".btn-danger", function() {
    $(this).parents(".card").remove();
  });

  $('input[value="Add Article"]').attr('disabled', true);
  $('textarea').on('keyup', function() {
    var x = $("textarea").val();
    var title = $("#title").val();
    if (x != '' && title != '') {
      $('input[value="Add Article"]').attr('disabled', false);

    } else {
      $('input[value="Add Article"]').attr('disabled', true);
    }
  });
});

.user-name {
  background-color: #d4d4d4;
  line-height: 150px;
}

.comment-form {
  margin: auto;
  width: 70%
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<div class="container">
  <header>
    <div class=" user-name alert text-center mt-3 border-primary">
      User Name /Blog
    </div>
  </header>
  <section class=" row comment-form">
    <div class="card bg-light col-12 p-0 ">
      <div class="card-header bg-primary text-white text-center">
        Add A New Comment
      </div>
      <div class="card-body">
        <form>
          <div class="form-group row">
            <label for="title" class="col-form-label col-sm-2"> Title</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="Write Your Title" id="title">
            </div>
          </div>
          <div class="form-group row">
            <label for="comment" class="col-form-label col-sm-2"> Content</label>
            <div class="col-sm-10">
              <textarea class="form-control" rows="3" placeholder="Write Your Content" id="comment"></textarea>
            </div>
          </div>
          <input class="btn btn-primary float-right" value="Add Article">
        </form>
      </div>
    </div>
  </section>
  <section class="mt-3">
    <div class="col-12">
      <div class="card-columns">
        <div class="card" id="article-1">
          <div class="card-header">
            <div class="card-text text-center">
              <h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
            </div>
          </div>
          <div class="card-body">
            <div class="card-text text-justify">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
          <div class="card-footer text-right">
            <button class="btn btn-primary view fas fa-eye">  Hide</button>
            <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
          </div>
        </div>
        <div class="card" id="article-2">
          <div class="card-header">
            <div class="card-text text-center">
              <h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
            </div>
          </div>
          <div class="card-body">
            <div class="card-text text-justify">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
          <div class="card-footer text-right">
            <button class="btn btn-primary view fas fa-eye">  Hide</button>
            <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
          </div>
        </div>
        <div class="card" id="article-3">
          <div class="card-header">
            <div class="card-text text-center">
              <h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h5>
            </div>
          </div>
          <div class="card-body">
            <div class="card-text text-justify">
              <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
                book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
                recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
          </div>
          <div class="card-footer text-right">
            <button class="btn btn-primary view fas fa-eye">  Hide</button>
            <button class="btn btn-danger"><i class="fas fa-trash-alt mr-1"></i>Delete</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

更改 .view 上的功能点击然后它会工作

  $("body").on("click",".view", function(){

    $(this).parent().siblings(".card-body").slideToggle(2000, function(){

        if ($(this).css("display")=="none"){

        $(this).next("div.card-footer").find(".view").text(' Show')

        }else{
        $(this).next("div.card-footer").find(".view").text('Hide');

        }
        $(".view").toggleClass("fa-eye-slash");
    });

});