在jQuery中基于CSS类设置变量答案

【问题标题】：Setting a variable based on CSS class in jQuery在jQuery中基于CSS类设置变量
【发布时间】：2013-06-03 13:54:25
【问题描述】：

仍在尝试找出惯用的 jQuery——这里有一些 jQuery 用于根据 div 的类设置变量——是否有一种 jQuery 方法可以更紧凑地执行此操作，因为所讨论的 div 可能有多个 class 。 ..

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

【问题讨论】：

标签： jquery css

【解决方案1】：

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

这将分配类属性中的任何内容，因此也可以处理多个类

如果以后您可能想要进行单独检查，您可以将类拆分为一个单独的类值数组......就像这样：

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

【讨论】：

是的，但目的是能够立即使用 currentType 来获取适当的（隐藏的）对话框 div。在这种情况下，我必须添加某种检查（比如'text_component'）是否在数组中。还是我错过了什么？

【解决方案2】：

如果我的理解正确，我建议您使用由 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!');

希望对你有帮助，思南。

【讨论】：

看准了！这正是我一直在寻找的东西......意味着我不必继续为新的组件类添加测试。谢谢。
不客气，这也为我节省了很多时间:)

【解决方案3】：

使用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]');

【讨论】：

感谢您对“。”的提醒。