jQuery切换单击可显示一个div，而隐藏其他

Question

I created a function for the delete button for the div comment. when the click delete then the delete button will come out and if the click cancel delete button will hide.

But I have a problem when it has two div comment, when in click delete then delete another div comment button also exit.

How to order when click delete delete button will come out but in div comment other not show.

Thanks in advance .

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

You have to change

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

to

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

In your original case, when you use $('.comment-body, .option') , it will target all elements with the said classes.

Whereas, when you use $(this) , it would find the elements relative to the delete link that was clicked.

Answer 2

This will help you,

.closest('.comment') method will search for the closest element which is having comment class.

 // DELETE COMMENT BUTTON $(document).ready(function() { $('.del-i, .cans').on('click', function(e) { e.preventDefault(); $(this).closest('.comment').find('.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 3

 // 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(); }); }); 

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

$(this).closest('.comment').children('.comment-body, .option').toggleClass('show'); will make it work.

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