Javascript 在两个按钮之间切换

我有包含两个元素的post容器：喜欢和不喜欢按钮。有多个帖子，所以我有多个帖子容器，每个容器都包含各自的按钮。单击按钮时，该按钮应在其自己的post容器中的类之间切换。然而，我面临的问题是，如果一个按钮是“喜欢”的，而我们试图点击“不喜欢”按钮，该怎么办。我们如何从“喜欢”状态切换到“不喜欢”状态？这是我的密码：

HTML

<div class="post-container">
  <i class="far fa-thumbs-up btns"></i>
  <i class="far fa-thumbs-down btns"></i>
</div>

<div class="post-container">
  <i class="far fa-thumbs-up btns"></i>
  <i class="far fa-thumbs-down btns"></i>
</div>

JavaScript

$(document).ready(function() {

  $(".fa-thumbs-up").click(function() {
    like_question(this);
  });

  $(".fa-thumbs-down").click(function() {
    dislike_question(this);
  });
});



function like_question(question) {
  question.classList.toggle("thumbs-up-clicked");
}

function dislike_question(question) {
  question.classList.toggle("thumbs-down-clicked");
}

---

如果用户喜欢某个特定的帖子，然后决定单击“拇指朝下”按钮，我们如何使其不处于活动状态而“拇指朝下”按钮处于活动状态？

我通过将

拇指朝上单击的
和
拇指朝下单击的
类移动到父类来管理帖子容器的状态，然后相应地更新了
like_question
和
dislike_question
函数


$（“.fa竖起大拇指”）。单击（函数（）{
像_问题（$（this）.parent（）[0]）；
});
$（“.fa拇指朝下”）。单击（函数（）{
不喜欢问题（$（this.parent（）[0]）；
});
函数类_问题（问题）{
问题.classList.toggle（“竖起拇指点击”）；
问题.classList.remove（“拇指向下点击”）；
}
功能性问题（问题）{
问题.classList.toggle（“拇指向下点击”）；
问题。类列表。删除（“竖起大拇指点击”）；
}
.btns{
字体大小：32px；
利润率：20px；
光标：指针；
}
.竖起大拇指单击。fa竖起大拇指{
颜色：蓝色；
}
.拇指朝下单击。fa拇指朝下{
颜色：红色；
}
我正在管理您的邮件容器的状态，方法是将
大拇指向上点击
和
大拇指向下点击
类移动到父类，然后相应地更新
like\u question
和
dislike\u question
函数


$（“.fa竖起大拇指”）。单击（函数（）{
像_问题（$（this）.parent（）[0]）；
});
$（“.fa拇指朝下”）。单击（函数（）{
不喜欢问题（$（this.parent（）[0]）；
});
函数类_问题（问题）{
问题.classList.toggle（“竖起拇指点击”）；
问题.classList.remove（“拇指向下点击”）；
}
功能性问题（问题）{
问题.classList.toggle（“拇指向下点击”）；
问题。类列表。删除（“竖起大拇指点击”）；
}
.btns{
字体大小：32px；
利润率：20px；
光标：指针；
}
.竖起大拇指单击。fa竖起大拇指{
颜色：蓝色；
}
.拇指朝下单击。fa拇指朝下{
颜色：红色；
}
您需要根据喜欢或不喜欢更改上一个或下一个兄弟姐妹的类列表。为此，您可以获得下一个或上一个同级，并从类列表中添加/删除该类

$(document).ready(function() {

  $(".fa-thumbs-up").click(function() {
    like_question(this);
  });

  $(".fa-thumbs-down").click(function() {
    dislike_question(this);
  });
});



function like_question(question) {
  question.classList.add("thumbs-up-clicked");
  let nextSibling = question.nextElementSibling;
    nextSibling.classList.remove("thumbs-down-clicked");
}

function dislike_question(question) {
  question.classList.add("thumbs-down-clicked");

  let previousSibling = question.previousElementSibling;
    previousSibling.classList.remove("thumbs-up-clicked");
}

解决方案链接：
您需要根据喜欢或不喜欢更改上一个或下一个同级的类列表。为此，您可以获得下一个或上一个同级，并从类列表中添加/删除该类

$(document).ready(function() {

  $(".fa-thumbs-up").click(function() {
    like_question(this);
  });

  $(".fa-thumbs-down").click(function() {
    dislike_question(this);
  });
});



function like_question(question) {
  question.classList.add("thumbs-up-clicked");
  let nextSibling = question.nextElementSibling;
    nextSibling.classList.remove("thumbs-down-clicked");
}

function dislike_question(question) {
  question.classList.add("thumbs-down-clicked");

  let previousSibling = question.previousElementSibling;
    previousSibling.classList.remove("thumbs-up-clicked");
}

解决方案链接：
找到所单击图标的父级
，并从元素中删除类


$（文档）.ready（函数（）{
$（“.fa竖起大拇指”）。单击（函数（）{
let getDown=$（this.parent（）.find（'.fa thumbs down'）；
if（getDown.hasClass（'thumbs-down-clicked'））{
removeClass（'thumbs-down-clicked'）；
}
$（this.addClass（'thumbs-up-clicked'））
});
$（“.fa拇指朝下”）。单击（函数（）{
让getUp=$（this.parent（）.find（'.fa thumbs'）；
if（getUp.hasClass（'thumbs-up-clicked'））{
removeClass（'thumbs-up-clicked'）；
}
$（this）.addClass（'thumbs-down-clicked'）
});
});
.btns{
字体大小：32px；
利润率：20px；
}
.竖起大拇指{
颜色：蓝色；
}
.拇指向下点击{
颜色：红色；
}
找到所单击图标的父级
，并从元素中删除类


$（文档）.ready（函数（）{
$（“.fa竖起大拇指”）。单击（函数（）{
let getDown=$（this.parent（）.find（'.fa thumbs down'）；
if（getDown.hasClass（'thumbs-down-clicked'））{
removeClass（'thumbs-down-clicked'）；
}
$（this.addClass（'thumbs-up-clicked'））
});
$（“.fa拇指朝下”）。单击（函数（）{
让getUp=$（this.parent（）.find（'.fa thumbs'）；
if（getUp.hasClass（'thumbs-up-clicked'））{
removeClass（'thumbs-up-clicked'）；
}
$（this）.addClass（'thumbs-down-clicked'）
});
});
.btns{
字体大小：32px；
利润率：20px；
}
.竖起大拇指{
颜色：蓝色；
}
.拇指向下点击{
颜色：红色；
}


您可以在下面的链接中查看结果

您可以在下面的链接中查看结果
您可以将一个类示例指定为活动：

<div class="post-container">
  <i class="far thumbs fa-thumbs-up btns active"></i>
  <i class="far thumbs fa-thumbs-down btns"></i>
</div>

这可以确保在对单击的元素设置活动类之前，活动类会从任何其他元素中删除，然后使用css对其进行控制以相应地更改颜色。但是，如果有多个元素可能同时包含“喜欢”和“不喜欢”按钮，则可能需要在点击父元素时指定相反，这可能也是一个可行的方法：

$('.post-container .thumbs').on('click', function(){
    $(this).parent().find('.thumbs.active').removeClass('active');
    $(this).addClass('active');
    })

您可以将类示例指定为活动：

<div class="post-container">
  <i class="far thumbs fa-thumbs-up btns active"></i>
  <i class="far thumbs fa-thumbs-down btns"></i>
</div>

这可以确保在对单击的元素设置活动类之前，活动类会从任何其他元素中删除，然后使用css对其进行控制以相应地更改颜色。但是，如果有多个元素可能同时包含“喜欢”和“不喜欢”按钮，则可能需要在点击父元素时指定相反，这可能也是一个可行的方法：

$('.post-container .thumbs').on('click', function(){
    $(this).parent().find('.thumbs.active').removeClass('active');
    $(this).addClass('active');
    })



喜恶
身体{
背景色：#000；
颜色：灰色；
}
.包装纸{
显示器：flex；
证明内容：周围的空间；
宽度：10%；
高度：10vh；
光标：指针；
职位：