时间戳

首页 > 解决方案 > 如果单击不喜欢相同的评论，则删除喜欢按钮的活动状态，如果单击喜欢，则删除不喜欢按钮的活动状态

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

问题描述

请访问此处查看现场直播https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html

在这里，我有多个评论部分，每个评论都有喜欢、不喜欢和回复按钮。

我添加了一个类名，称为like-dis-icon-active类似不喜欢的图标以使其处于活动状态，并删除类名以使其处于非活动状态。

单击喜欢和不喜欢按钮时应该是活动的，如果再次单击它应该是不活动的。

当点赞按钮处于活动状态，然后用户单击不喜欢按钮时，点赞按钮应该处于非活动状态，并且不喜欢按钮应该对于同一评论处于活动状态，但其他评论部分上的点赞按钮应保持不变。对不喜欢的按钮做同样的事情。

请不要使用任何 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 -->

标签： javascripthtmlcss

解决方案

当您尝试激活评论的不喜欢按钮时，您只需要删除喜欢按钮的活动状态。

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

推荐阅读