如果对同一评论单击不喜欢，则删除喜欢按钮的活动状态，如果单击喜欢，则删除不喜欢按钮的活动状态

Question

Please visit here to see live https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html请访问此处查看直播https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html

Here I have multiple comment sections with like, dislike and reply buttons for each comment.在这里，我有多个评论部分，每个评论都有喜欢、不喜欢和回复按钮。

I have added a class name called like-dis-icon-active to the like dislike icons to make it active and remove the class name to make it inactive.我添加了一个名为like-dis-icon-active的类名到like-dis-icon-active dislike 图标以使其处于活动状态并删除类名以使其处于非活动状态。

When clicked the like and dislike button should be active and if clicked again it should become inactive.单击“喜欢”和“不喜欢”按钮时应处于活动状态，再次单击时应变为非活动状态。

When the like button is active and then the user clicks dislike button the like button should be inactive and the dislike button should be active for the same comment but the like button on the other comment section should remain unchanged.当喜欢按钮处于活动状态然后用户单击不喜欢按钮时，喜欢按钮应该处于非活动状态，并且不喜欢按钮应该对同一评论处于活动状态，但其他评论部分上的喜欢按钮应保持不变。 And do the same for dislike buttons.对不喜欢的按钮也做同样的事情。

Please do not use any id name cause I need to copy-paste this comment multiple times on the page and show it in pure JavaScript.请不要使用任何 id 名称，因为我需要在页面上多次复制粘贴此评论并以纯 JavaScript 显示。

 var like_btns = document.querySelectorAll('.other-com-likeicon'); var dislike_btns = document.querySelectorAll('.other-com-dislikeicon'); like_btns.forEach(btn => { btn.addEventListener('click', likeBtnsActive); }); function likeBtnsActive(e) { var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con'); var like_icon = like_icon_con.querySelector('.other-com-likeicon'); like_icon.classList.toggle('like-dis-icon-active'); } dislike_btns.forEach(btn => { btn.addEventListener('click', dislikeBtnsActive); }); function dislikeBtnsActive(e) { var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con'); var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon'); dislike_icon.classList.toggle('like-dis-icon-active'); }

 * { margin: 0px; font-family: 'Segoe UI', sans-serif; } .other-com-namcombtn-con { padding: 20px; } .other-comment-text { font-size: 14px; line-height: 1.5; color: gray; padding: 5px 0px 5px 0px; } .ohter-com-likedisrepl-con { user-select: none; display: flex; align-items: center; padding: 2px 0px 2px 0px; } .other-com-likeicon { width: 12px; height: 12px; padding: 2px 3px 2px 1px; margin: 2px 7px 2px 0px; opacity: 0.6; } .other-com-likeicon:hover { opacity: 1; } .other-com-likeicon:focus { outline: none; } .other-com-likecount { font-size: 13px; color: gray; } .other-com-dislikeicon { width: 12px; height: 12px; padding: 2px 3px 2px 3px; margin: 2px 7px 2px 25px; opacity: 0.6; } .other-com-dislikeicon:hover { opacity: 1; } .other-com-dislikeicon:focus { outline: none; } .other-com-dislikecount { font-size: 13px; color: gray; } .other-com-replybtn { font-size: 13px; color: gray; padding: 4px 12px; margin: 0px 0px 0px 20px; } .other-com-replybtn:hover { background-color: rgb(241, 241, 241); } .like-dis-icon-active { opacity: 1; }

 <!DOCTYPE html> <html lang='en-US'> <head> <title>like-dis-icon-active-effect</title> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <!-- start --> <body> <div class='other-com-namcombtn-con'> <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p> <div class='other-com-likedisbtnscom-con'> <div class='ohter-com-likedisrepl-con'> <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'> <p class='other-com-likecount'>24</p> <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'> <p class='other-com-dislikecount'>3</p> <p class='other-com-replybtn'>REPLY</p> </div> </div> </div> <div class='other-com-namcombtn-con'> <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium eaque.</p> <div class='other-com-likedisbtnscom-con'> <div class='ohter-com-likedisrepl-con'> <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'> <p class='other-com-likecount'>24</p> <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'> <p class='other-com-dislikecount'>1</p> <p class='other-com-replybtn'>REPLY</p> </div> </div> </div> <div class='other-com-namcombtn-con'> <p class='other-comment-text'>Sed ut perspiciatis unde omniserror sit voluptatem accusantium eaque.</p> <div class='other-com-likedisbtnscom-con'> <div class='ohter-com-likedisrepl-con'> <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'> <p class='other-com-likecount'>24</p> <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'> <p class='other-com-dislikecount'>2</p> <p class='other-com-replybtn'>REPLY</p> </div> </div> </div> </body> </html> <!-- end -->

Answer 1

You just need to remove the active state of like button when you try to active the dislike button of a comment.当您尝试激活评论的不喜欢按钮时，您只需要删除喜欢按钮的活动状态。

 var like_btns = document.querySelectorAll('.other-com-likeicon'); var dislike_btns = document.querySelectorAll('.other-com-dislikeicon'); like_btns.forEach(btn => { btn.addEventListener('click', likeBtnsActive); }); function likeBtnsActive(e) { var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con'); var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon'); dislike_icon.classList.remove('like-dis-icon-active'); var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con'); var like_icon = like_icon_con.querySelector('.other-com-likeicon'); like_icon.classList.toggle('like-dis-icon-active'); } dislike_btns.forEach(btn => { btn.addEventListener('click', dislikeBtnsActive); }); function dislikeBtnsActive(e) { var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con'); var like_icon = like_icon_con.querySelector('.other-com-likeicon'); like_icon.classList.remove('like-dis-icon-active'); var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con'); var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon'); dislike_icon.classList.toggle('like-dis-icon-active'); }

 * { margin: 0px; font-family: 'Segoe UI', sans-serif; } .other-com-namcombtn-con { padding: 20px; } .other-comment-text { font-size: 14px; line-height: 1.5; color: gray; padding: 5px 0px 5px 0px; } .ohter-com-likedisrepl-con { user-select: none; display: flex; align-items: center; padding: 2px 0px 2px 0px; } .other-com-likeicon { width: 12px; height: 12px; padding: 2px 3px 2px 1px; margin: 2px 7px 2px 0px; opacity: 0.6; } .other-com-likeicon:hover { opacity: 1; } .other-com-likeicon:focus { outline: none; } .other-com-likecount { font-size: 13px; color: gray; } .other-com-dislikeicon { width: 12px; height: 12px; padding: 2px 3px 2px 3px; margin: 2px 7px 2px 25px; opacity: 0.6; } .other-com-dislikeicon:hover { opacity: 1; } .other-com-dislikeicon:focus { outline: none; } .other-com-dislikecount { font-size: 13px; color: gray; } .other-com-replybtn { font-size: 13px; color: gray; padding: 4px 12px; margin: 0px 0px 0px 20px; } .other-com-replybtn:hover { background-color: rgb(241, 241, 241); } .like-dis-icon-active { opacity: 1; }

 <!DOCTYPE html> <html lang='en-US'> <head> <title>like-dis-icon-active-effect</title> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <!-- start --> <body> <div class='other-com-namcombtn-con'> <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p> <div class='other-com-likedisbtnscom-con'> <div class='ohter-com-likedisrepl-con'> <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'> <p class='other-com-likecount'>24</p> <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'> <p class='other-com-dislikecount'>3</p> <p class='other-com-replybtn'>REPLY</p> </div> </div> </div> <div class='other-com-namcombtn-con'> <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium eaque.</p> <div class='other-com-likedisbtnscom-con'> <div class='ohter-com-likedisrepl-con'> <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'> <p class='other-com-likecount'>24</p> <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'> <p class='other-com-dislikecount'>1</p> <p class='other-com-replybtn'>REPLY</p> </div> </div> </div> <div class='other-com-namcombtn-con'> <p class='other-comment-text'>Sed ut perspiciatis unde omniserror sit voluptatem accusantium eaque.</p> <div class='other-com-likedisbtnscom-con'> <div class='ohter-com-likedisrepl-con'> <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'> <p class='other-com-likecount'>24</p> <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'> <p class='other-com-dislikecount'>2</p> <p class='other-com-replybtn'>REPLY</p> </div> </div> </div> </body> </html> <!-- end -->

如果对同一评论单击不喜欢，则删除喜欢按钮的活动状态，如果单击喜欢，则删除不喜欢按钮的活动状态

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-12 11:07:51

如果对同一评论单击不喜欢，则删除喜欢按钮的活动状态，如果单击喜欢，则删除不喜欢按钮的活动状态

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-12 11:07:51

解决方案1
1 已采纳 2020-02-12 11:07:51