Question

我创建了一个按钮，当用户点击它时，当前的类应替换为新的，反之亦然。但是addClass或removeClass都没有显示任何效果。我没有在控制台日志中看到任何错误或警告消息。

JQuery代码：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, target-densitydpi=device-dpi">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="container-fluid" id="app">
    <div class="row" id="bg">
      <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="pic">
        <div class="leftlayer-gradient hidden-md hidden-lg">
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="details">
        <div class="rightlayer">
        </div>
      </div>
    </div>
  </div>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

HTML代码：

#pic, #details {
  height: 100vh;
}

#details {
  background-color: red;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: left;
}

#pic {
  background-color: yellow;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: right;
}

.rightlayer {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.leftlayer-gradient {
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* Standard syntax (must be last) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 1

jQuery对象$(this)不再引用所点击的.vote_btn。在成功回调中，将单击的按钮存储在变量中，并在回调中使用此变量：

$('.vote_btn').click(function(){
  var _this = $(this);

  $.ajax({
        url:'/joseph/pages/votes.php',
        type: 'post',
        //dataType:'json',
        data:{'comment_id':_this.data('commentid')},
        success: function(data){
          if(data == 'up'){
              _this.removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
          } else if(data == 'reversed') {
              _this.removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
          } else {
            alert(data);
          }
        }
  });
});

希望这有帮助。

Answer 2

试试这个会起作用：

 $('.vote_btn').click(function(){
  var curEvent=$(this);
   $.ajax({
    url:'/joseph/pages/votes.php',
    type: 'post',
    //dataType:'json',
    data:{'comment_id':$(this).data('commentid')},
    success: function(data){
      if(data == 'up'){
          $(curEvent).removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up');
      } else if(data == 'reversed') {
          $(curEvent).removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
      } else {
        alert(data);
      }
    }
   });
   });

jQuery removeClass和addClass无法正常工作

2 个答案: