javascript - 如果单击“不喜欢”相同的评论，则删除“喜欢”按钮的事件状态，如果单击“喜欢”，则删除“不喜欢”按钮的事件状态

标签 javascript html css

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

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

我已将名为 like-dis-icon-active 的类名称添加到 like 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 -->

最佳答案

当您尝试激活评论的“不喜欢”按钮时，只需删除“喜欢”按钮的事件状态即可。

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

关于javascript - 如果单击“不喜欢”相同的评论，则删除“喜欢”按钮的事件状态，如果单击“喜欢”，则删除“不喜欢”按钮的事件状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60186669/

上一篇：javascript - jQuery 到 JavaScript(在其他行之后插入行)

下一篇：javascript - 如何将 application/octet-stream 转换为以 base64 或任何 jpeg 格式显示的图像？

相关文章：

javascript - 制造变量名称

html - 为什么我的拇指在使用谷歌浏览器时消失了？

css - HTML 页面不会验证

javascript - 单击子菜单未打开页面它隐藏了 HTML 中的子菜单

javascript - 如何启用浏览器访问摄像头？

jquery - 设置文本可点击的问题

javascript - 使用切换按钮更改相框

javascript - 带有点击事件的 jQuery 动态 ajax 数据

javascript - 悬停时的过渡按钮

javascript - Python:更新通过浏览器中的 JavaScript 调用创建的 html 时出现问题

©2024 IT工具网  联系我们