Question

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

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>

CSS

.btns {
  font-size: 32px;
  margin: 20px;
}

.thumbs-up-clicked {
  color: blue;
}

.thumbs-down-clicked {
  color: red;
}

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");
}

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

Answer 1

我正在通过将thumbs-up-clicked和thumbs-down-clicked类移到父级来管理您的帖子容器的状态，然后相应地更新了like_question和dislike_question函数。

$(".fa-thumbs-up").click(function() {
  like_question($(this).parent()[0]);
});

$(".fa-thumbs-down").click(function() {
  dislike_question($(this).parent()[0]);
});

function like_question(question) {
  question.classList.toggle("thumbs-up-clicked");
  question.classList.remove("thumbs-down-clicked");
}

function dislike_question(question) {
  question.classList.toggle("thumbs-down-clicked");
  question.classList.remove("thumbs-up-clicked");
}

.btns {
  font-size: 32px;
  margin: 20px;
  cursor: pointer;
}

.thumbs-up-clicked .fa-thumbs-up {
  color: blue;
}

.thumbs-down-clicked .fa-thumbs-down {
  color: red;
}

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>

Answer 2

您需要根据喜欢或不喜欢更改上一个或下一个同级的classList。为此，您可以掌握下一个或上一个同级，并从classList中添加/删除该类。

$(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");
}

解决方案链接：http://jsfiddle.net/9eo8xfwd/25/

Answer 3

找到单击的图标的parent，然后从元素中删除类

$(document).ready(function() {

  $(".fa-thumbs-up").click(function() {
    let getDown = $(this).parent().find('.fa-thumbs-down');
    if (getDown.hasClass('thumbs-down-clicked')) {
      getDown.removeClass('thumbs-down-clicked');
    }
    $(this).addClass('thumbs-up-clicked ')
  });

  $(".fa-thumbs-down").click(function() {
    let getUp = $(this).parent().find('.fa-thumbs-up');
    if (getUp.hasClass('thumbs-up-clicked')) {
      getUp.removeClass('thumbs-up-clicked');
    }
    $(this).addClass('thumbs-down-clicked ')
  });
});

.btns {
  font-size: 32px;
  margin: 20px;
}

.thumbs-up-clicked {
  color: blue;
}

.thumbs-down-clicked {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">





<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>

Answer 4

function like_question(question) {
  question.classList.toggle("thumbs-up-clicked");
  if(question.classList.contains("thumbs-up-clicked")){
    if(question.nextElementSibling.classList.contains("thumbs-down-clicked")){
        question.nextElementSibling.classList.remove("thumbs-down-clicked");
    }
  }
}

function dislike_question(question) {
  question.classList.toggle("thumbs-down-clicked");
  if(question.classList.contains("thumbs-down-clicked")){
    if(question.previousElementSibling.classList.contains("thumbs-up-clicked")){
        question.previousElementSibling.classList.remove("thumbs-up-clicked");
    }
  }
}

您可以在下面的链接http://jsfiddle.net/9eo8xfwd/36/中查看结果

Answer 5

您可以分配一个有效的课程示例：

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

在元素上设置了此类后，您可以通过以下方式定位它：

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

这确保在将活动类设置为clicked元素之前，将活动类从其他任何对象中移除，然后使用CSS控制它以相应地更改颜色，但是如果有多个元素可能包含两个并且不喜欢该按钮，您可能需要特定于点击父元素，相反，这可能会以某种方式起作用：

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

Answer 6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Like And Dislike</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
</head>
<style>
    body{
        background-color: #000;
        color: gray;
    }
    .wrapper{
        display: flex;
        justify-content: space-around;
        width: 10%;
        height: 10vh;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-40%,-50%);
        font-size: 20px;
    }
    .active{
        color: blue;
    }
</style>
<body>
    <div class="wrapper">
        <button class="like"><i class="fas fa-thumbs-up" ></i></button>
        <button class="dislike"><i class="fas fa-thumbs-down"></i></button>
    </div>
    <script>
        const wrapper = document.querySelector('.wrapper');
        const like = document.querySelector('.like');
        const dislike = document.querySelector('.dislike');
        like.addEventListener('click',()=>{
            like.classList.toggle('active');
            if(like.classList.contains('like')){
            if(dislike.classList.contains('dislike')){
                dislike.classList.remove('active');
            }
            }
            });
            dislike.addEventListener('click',()=>{
            dislike.classList.toggle('active');
            if(dislike.classList.contains('dislike')){
            if(like.classList.contains('like')){
            like.classList.remove('active');
            }
            }
            });
    </script>
</body>
</html>

在两个按钮之间切换JavaScript

6 个答案: