在jQuery中设置一个基于CSS类的变量

Question

仍然试图找出惯用的jQuery - 这里有一些用于设置div类的变量的jQuery - 有没有一种更简洁的jQuery方法，因为div问题可能有不止一类...

var currentType = 'component'; 
// text_component, image_component, tagged_component 
if ($(my_div).hasClass('.text_component')) { currentType = 'text_component' }; 
if ($(my_div).hasClass('.image_component')) { currentType = 'image_component' }; 
if ($(my_div).hasClass('.tagged_component')) { currentType = 'tagged_component' }; 

var dialog_box = $('div[id^='+currentType+'_dialog]'); 

Answer 1

如果我弄明白了，我建议你使用由John Resig（jquery的创建者）编写的metadata plugin，你可以在任何div元素上设置任何数据供以后使用。你不需要从CSS类获取参数。您可以随时阅读这些数据。

样品的标记：（从插件页面）

<div class="someclass {some: 'data'} anotherclass">...</div> 

然后在javascript：

var data = $('div.someclass').metadata(); 
if (data.some == 'data') alert('It Worked!'); 

希望它能帮助，思南。

Answer 2

当使用hasClass测试，不包括.（点）。

至于更简单的方法，你可以缩短它，但使用hasClass可能是最好的方法。

我假设这些类有优先权（因此如果有多个类，那么if系列中的后者优先于其他类）？或者你想支持多个“组件”？

下面是一个更有效的版本，显示出较好的正在发生的事情：

var currentType, div = $(my_div); 
// text_component, image_component, tagged_component 
if (div.hasClass('tagged_component')) currentType = 'tagged_component'; 
else if (div.hasClass('image_component')) currentType = 'image_component'; 
else if (div.hasClass('text_component')) currentType = 'text_component'; 
else currentType = 'component'; 

var dialog_box = $('div[id^='+currentType+'_dialog]'); 

Answer 3

currentType = $(my_div).attr("class"); 

将分配无论是在类的属性，因此也处理超过一类

如果以后你可能想要做个别检查，你可以将这些类拆分成一个单独的类值的数组......像这样：

var classes = currentType.split(' '); //return an array of separate class values