Jquery切换单击以显示一个div而隐藏其他div

时间：2017-12-16 06:16:05

标签： javascript jquery html

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

4 个答案:

答案 0 :(得分：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链接相关的元素。

答案 1 :(得分：1)

这会对你有帮助，

.closest('.comment')方法将搜索具有comment类的最近元素。

＆＃13;
＆＃13; 
// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.comment').find('.comment-body, .option').toggleClass('show');
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    //$('.comment-body, .option').toggleClass('show');
    $(this).parent().parent().toggleClass('show');
    //  $(this).parent().parent().siblings('.option').toggleClass('show');
    $(this).parent().parent().next('.option').toggleClass('show');
  });
  $('.del-comment').on('click', function(e) {
    e.preventDefault();
    //$(this).closest('.comment').remove();  
    $(this).closest('.comment').hide();
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

$(this).closest('.comment').children('.comment-body, .option').toggleClass('show');会让它发挥作用。

＆＃13;
＆＃13; 
// DELETE COMMENT BUTTON
$(document).ready(function() {
  $('.del-i, .cans').on('click', function(e) {
    e.preventDefault();
    $(this).closest('.comment').children('.comment-body, .option').toggleClass('show');
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题