Javascript多类每个函数获取选定的类名

Question

<div class="myclass effect1">bla bla</div>
<div class="myclass effect2">bla bla</div>
<div class="myclass effect3">bla bla</div>
<div class="myclass effect4">bla bla</div>

jQuery('.effect1, .effect2, .effect3, effect4').each( function()
        {       
               //I need to find which class is chosen?? 
                var newclass= Chosen class here will be here             
                jQuery(this).addClass('animated');

        }
        ); 

我在上面的代码中添加了信息。那么我怎样才能使这项工作呢？ 提前致谢

Answer 1

在您的迭代器函数中，this 将是匹配的 DOM 元素。该元素有一个className 属性，该属性带有一个以空格分隔的元素上的类列表。可能不止一个，除非您在标记中知道只有一个。

如果只有一个，直接使用this.className即可。

var newclass = this.className;

如果不止一个，你可能会发现 jQuery 的 hasClass 函数很有用：

var $this = $(this);
if ($this.hasClass('effect1')) {
    // ...
}
else if ($this.hasClass('effect2') {
    // ...
}
// ...

---

但是，如果你想根据元素匹配的类来做不同的事情，那么分解你的查询可能更有意义。如果您尝试对匹配给定类的所有元素执行某些操作，那么您甚至可能不需要 each。

例如：

jQuery(".effect1").animate({/*..settings for effect1..*/);
jQuery(".effect2").animate({/*..settings for effect2..*/);
jQuery(".effect3").animate({/*..settings for effect3..*/);
jQuery(".effect4").animate({/*..settings for effect4..*/);

---

从您的评论看来，您可能想要一个调度地图，如下所示：

var map = {
    effect1: function() { /* ...stuff for effect1... */ },
    effect2: function() { /* ...stuff for effect2... */ },
    // ...and so on...
};

您将它放在代码的主要级别。

在each 内（如果您想使用each），您可以像这样识别this.className 中的第一个 effectX 类：

var match = /effect\d/.exec(this.className);
var cls = match && match[0];

然后你就可以使用你的调度地图了：

if (cls) {
    map[cls].call(this);
}

调用函数，使函数内的this 成为DOM 元素。或者您可以将其作为参数传递：

if (cls) {
    map[cls](this);
}

...并让您的调度功能接受它，例如effect1: function(element) {...