toggleClass之后，ClassName变为未定义

ClassName becomes undefined after toggleClass

本文关键字：未定义 ClassName 之后 toggleClass      更新时间：2023-09-26

这是我的代码。当我"切换拇指向上的字形图标"并试图在点击向下投票按钮时获得其类名的值。它给出了未定义的值。

附言：当我试图在它自己的函数中获得它的值时，它运行得很好。

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

您应该使用.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');
});

此外，我真的怀疑你切换的类不是你想要的。

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

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

此代码适用于我。

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

相关文章：