用于检查 div ClassName 的简单 jQuery 函数

Question

我编写了一个非常简单的函数来检查标签 class 名称。我通过使用 .attr() 将其附加到 div(s) 并且提醒似乎没有问题。

但是，$(this).attr('class') 无法显示正确的 class 名称，只能显示

"undefined"

。其实$(this)我还有很多想做的事情所以一开始就停了真的很可惜

谁能告诉我为什么会发生这种情况以及如何解决它？

<div class="testing class1" >Something here</div>
<div class="testing class2" >Something here</div>    
<script>

$("div.testing").attr('onclick', 'checkClass()');

function checkClass(){
  alert( $(this).attr('class'));
  // what do something more with "$(this)"
}

Answer 1

尝试按以下方式实现它，您的代码将在警报中输出 undefined，因为 this 引用 checkClass() 函数而不是您尝试定位的元素，看下面的演示，你应该学会如何制作一个简单的 plugin

$.fn.checkClass = function() {
  $(this).on('click', function() {
    console.log($(this).attr('class'));
  });
}
$("div.testing").checkClass();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing class1">Something here</div>
<div class="testing class2">Something here</div>

Answer 2

尽管 jQuery 有自己的方法来从/向元素添加/删除类，但枚举没有任何方法。所以你应该使用原生js方法。

var checkClass = e => {
  alert(e.target.classList)
}

$("div.testing").click(checkClass)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testing class1" >Something here</div>
<div class="testing class2" >Something here</div>

Answer 3

您必须将其传递给函数，因为 $(this) = window;

请试试这个：

$("div.testing").attr('onclick', 'checkClass(this)');
function checkClass(e){
  alert( e.className);
  // what do something more with e, this is you clicked element
}

用于检查 div ClassName 的简单 jQuery 函数

Simple jQuery function to check the div ClassName

jquery

classname