在toggleClass之后ClassName变得未定义[重复]答案

【问题标题】：ClassName becomes undefined after toggleClass [duplicate]在toggleClass之后ClassName变得未定义[重复]
【发布时间】：2015-12-15 08:10:17
【问题描述】：

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

附：当我尝试在自己的函数中获取它的值时，它工作正常。

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

【问题讨论】：

事件处理程序在执行时在与选择器匹配的元素上初始化，更改类不会影响事件处理程序。
看我的回答这就是你想要的。

标签： javascript jquery

【解决方案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');
});

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

【讨论】：

【解决方案2】：

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

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

});

【讨论】：

【解决方案3】：

此代码对我有用。

$(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>

【讨论】：