Question

这是我的代码。当我“切换竖起大拇指glyphicon”并尝试通过点击downvote按钮获取其类名的值。它给出了未定义的值。

P.S。当我试图在它自己的函数中获得它的值时，它工作正常。

 <div style="float:right">
     <a class="upvotebtn" href="#" ><i class="fa fa-thumbs-o-up"></i>10000</a>
     <a class="downvotebtn" href="#" ><i class="fa fa-thumbs-o-down"></i>10000</a>
</div>

$('.upvotebtn').click(function(){
    $(this).find('i').toggleClass('fa-thumbs-o-up').toggleClass('fa-thumbs-up');
    $(this).toggleClass('upvotebtn').toggleClass('upvotebtn-highlight');
});

$('.downvotebtn').click(function(){
        $(this).find('i').toggleClass('fa-thumbs-o-down').toggleClass('fa-thumbs-down');
        $(this).toggleClass('downvotebtn').toggleClass('downvotebtn-highlight');     
});

Answer 1

您应该使用.on设置事件处理程序，因为它本质上是动态的。您也可以在单.toggleClass

中传递多个类

$(document).on("click", '.upvotebtn', function(){
    $(this).toggleClass('upvotebtn upvotebtn-highlight').find('i').toggleClass('fa-thumbs-o-up fa-thumbs-up');

});
$(document).on("click", '.downvotebtn', function(){
        $(this).toggleClass('downvotebtn downvotebtn-highlight').find('i').toggleClass('fa-thumbs-o-down fa-thumbs-down');
});

此外，我真的怀疑你正在切换的课程不是你想要的。

Answer 2

您正在更改按钮的类，然后尝试按该类选择。那不行。相反，切换不在选择器中使用的类。例如：

$('.upvotebtn').click(function(){
    $(this).find('i').toggleClass('fa-thumbs-o-up').toggleClass('fa-thumbs-up');
    $(this).toggleClass('upvotebtn-highlight');

});

Answer 3

此代码适用于我。

＆＃13;

$(document).ready(function(){
  $('.upvotebtn').click(function(){
    $(this).find('i').toggleClass('fa-thumbs-o-up fa-thumbs-up');
    $(this).toggleClass('upvotebtn upvotebtn-highlight');
  });

  $('.downvotebtn').click(function(){
    $(this).find('i').toggleClass('fa-thumbs-o-down fa-thumbs-down');
    $(this).toggleClass('downvotebtn downvotebtn-highlight');
  });
});

＆＃13;

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<div style="float:right">
     <a class="upvotebtn" href="#" ><i class="fa fa-thumbs-o-up"></i>10000</a>
     <a class="downvotebtn" href="#" ><i class="fa fa-thumbs-o-down"></i>10000</a>
</div>

＆＃13;

在toggleClass之后，ClassName变为未定义

3 个答案: