【发布时间】：2020-02-12 19:14:48
【问题描述】：
请访问这里观看直播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 -->【问题讨论】：
标签： javascript html css