检查 div ClassName 的简单 jQuery 函数

Posted 2023-03-16

【中文标题】检查 div ClassName 的简单 jQuery 函数

【英文标题】：Simple jQuery function to check the div ClassName

【发布时间】：2018-05-09 22:37:22

【问题描述】：

我写了一个非常简单的函数来检查标签类名。 我使用 .attr() 将它附加到 div 上，提醒似乎没有问题。

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

“未定义”

。 其实我还有很多事情想做$(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)"

【参考方案1】：

你必须把它传递给函数，因为$(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

【讨论】：

对于使用 JQuery，只需将 $(this) 更改为 $(e) 就很方便。非常简单的方法来解决这个问题，非常感谢。

【参考方案2】：

尝试通过以下方式实现它，您的代码将在警报中输出undefined，因为this 引用checkClass() 函数而不是您尝试定位的元素， 看下面的demo，你应该学习如何制作一个简单的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>

【参考方案3】：

虽然 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>