Javascript多類每個函數都會被選中類名稱

<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'); 

     } 
     );

我在上面的代碼中添加了信息。那我該如何做這項工作？在此先感謝Javascript多類每個函數都會被選中類名稱

來源

2013-07-18 Adnan Bekir

在您的迭代器函數中，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) {...

來源

2013-07-18 05:24:23

但事情是有大約30個類元素可以選擇，所以我需要更簡單的方法來做到這一點，而不是寫30次，如果我想其他。 –

@AdnanBekir：'switch'？或調度地圖？ –

@AdnanBekir：我已經添加了一個調度映射的例子。 –

Javascript多類每個函數都會被選中類名稱

回答

相關問題