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..*/);

<小时/>

从您的评论来看，您可能想要一张调度 map ，如下所示:

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

您将其放在代码的主级别上。

在 each 中(如果您想使用 each)，您可以识别 first effectX 类在 this.className 中，如下所示:

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

然后您可以使用您的调度 map :

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

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

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

...并让您的调度函数接受它，例如效果1:函数(元素){...