如果對同一評論單擊不喜歡，則刪除喜歡按鈕的活動狀態，如果單擊喜歡，則刪除不喜歡按鈕的活動狀態
[英]Remove like buttons active state if clicked dislike for the same comment and remove dislike buttons active state if clicked like
問題描述
請訪問此處查看直播https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html
在這里，我有多個評論部分，每個評論都有喜歡、不喜歡和回復按鈕。
我添加了一個名為like-dis-icon-active的類名到like-dis-icon-active dislike 圖標以使其處於活動狀態並刪除類名以使其處於非活動狀態。
單擊“喜歡”和“不喜歡”按鈕時應處於活動狀態，再次單擊時應變為非活動狀態。
當喜歡按鈕處於活動狀態然后用戶單擊不喜歡按鈕時，喜歡按鈕應該處於非活動狀態，並且不喜歡按鈕應該對同一評論處於活動狀態，但其他評論部分上的喜歡按鈕應保持不變。 對不喜歡的按鈕也做同樣的事情。
請不要使用任何 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 -->
1 個解決方案
解決方案1
1 已采納 2020-02-12 11:07:51
當您嘗試激活評論的不喜歡按鈕時，您只需要刪除喜歡按鈕的活動狀態。
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 -->
嘗試設置單擊的按鈕的狀態，但之前單擊的按鈕的狀態未更改
[英]Trying to setState of buttons which is clicked but State of previously clicked buttons is unchanged
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.