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），您可以在effectX中识别第一个 this.className类，如下所示：

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) {...

Javascript多个类的每个函数都获得选中的类名

1 个答案: