Remove like buttons active state if clicked dislike for the same comment and remove dislike buttons active state if clicked like
Question
Please visit here to see live 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.
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.
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 -->
1 answers
solution1
1 ACCPTED 2020-02-12 11:07:51
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 -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
VueJs Like and Dislike buttons with Vfor
Remove active state from parent when child is clicked and vice versa
Like/Dislike function
like and dislike in reat Js
Like/dislike functionality in AngularJs
Like Dislike Function AJAX
Like/Dislike System with NodeJS
Like and Dislike button in jQuery
Trying to setState of buttons which is clicked but State of previously clicked buttons is unchanged
Toggle active class to buttons when clicked
Related Tags