javascript - Jquery切换点击显示一个div同时隐藏其他div

Question

我为 div 注释的删除按钮创建了一个函数。当点击删除时删除按钮会出现，如果点击取消删除按钮会隐藏。

但是当它有两个 div 注释时我遇到了问题，当单击“删除”然后删除另一个 div 注释按钮时也会退出。

如何排序，点击删除时删除按钮会出来，但在div注释中其他不显示。

提前致谢。

// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $('.comment-body, .option').toggleClass('show');
  });
});

.blog-main .list-comment .comment {
  border-bottom: 1px solid #eee;
  padding-bottom: 1em;
  margin-bottom: 1em;
  position: relative;
  overflow: hidden;
}

.blog-main .list-comment .comment img {
  float: left;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  border-radius: 100%;
  width: 50px;
  margin: .5em;
  transition: all 0.5s ease;
}

img {
  max-width: 100%;
}

.blog-main .list-comment .comment .comment-body {
  font-size: 14px;
  margin-left: 5em;
  transition: all 0.5s ease;
}

.blog-main .list-comment .comment .comment-body .del-i {
  color: #999;
  font-size: 16px;
  margin-top: -.1em;
  margin-left: .5em;
}

.blog-main .list-comment .comment .comment-body .cans {
  display: none;
  margin-left: .5em;
}

.bg-light {
  background-color: #e9eff3 !important;
}

.blog-main .list-comment .comment .comment-body .name small {
  display: block;
  padding-top: .3em;
  color: #999;
}

.blog-main .list-comment .comment .option {
  background-color: #ff0057;
  width: 60px;
  height: 100%;
  text-align: center;
  transition: all 0.5s ease;
  position: absolute;
  top: 0;
  right: -100%;
}

.ds-table {
  display: table;
  width: 100%;
  height: 100%;
}

.ds-cell {
  display: table-cell;
  vertical-align: middle;
}

.blog-main .list-comment .comment .option .del-comment {
  color: #fff;
  font-size: 14px;
}

.blog-main .list-comment .comment .comment-body.show .del-i {
  display: none;
}

.blog-main .list-comment .comment .comment-body.show .cans {
  display: inline-block;
}

.blog-main .list-comment .comment .option.show {
  right: 0;
}

.blog-main .list-comment .comment .comment-body.show {
  padding-right: 5em;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div class="blog-main">
  <div class="list-comment">

    <!-- START LIST COMMENT -->
    <div class="comment">
      <img class="ava" src="img/user.png" alt="user">
      <div class="comment-body">
        <h6 class="name">Imam Khanafi
          <i class="material-icons del-i">delete</i>
          <span class="badge bg-light cans">Cancel</span>
          <small>email@email.com</small>
        </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
      </div>
      <div class="option">
        <div class="ds-table">
          <div class="ds-cell">
            <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END -->
    <!-- START LIST COMMENT -->
    <div class="comment">
      <img class="ava" src="img/user.png" alt="user">
      <div class="comment-body">
        <h6 class="name">Admin
          <i class="material-icons del-i">delete</i>
          <span class="badge bg-light cans">Cancel</span>
          <br>
          <span class="badge bg-yellow">Admin</span>
        </h6> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
        in faucibus.
      </div>
      <div class="option">
        <div class="ds-table">
          <div class="ds-cell">
            <a href="#delete-modal" class="del-comment btn-modal">Delete</a>
          </div>
        </div>
      </div>
    </div>
    <!-- END -->
  </div>
</div>

Answer 1

你必须改变

$('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $('.comment-body, .option').toggleClass('show');
});

到

$('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.comment-body').toggleClass('show');
    $(this).closest('.comment-body').siblings('.option').toggleClass('show');
});

在您原来的情况下，当您使用 $('.comment-body, .option') 时，它将针对具有所述类的所有元素。

然而，当您使用 $(this) 时，它会查找与所单击的 delete 链接相关的元素。