Jquery - 如何通过类名传递多个变量？答案

【问题标题】：Jquery - How to pass multiple variable through class name?Jquery - 如何通过类名传递多个变量？
【发布时间】：2011-05-11 14:56:08
【问题描述】：

我想创建一个能够接受无或多个变量并对其进行处理的通用/可扩展类。我想学习如何检查存在哪个字段、传递的字段数并对其进行处理。 'fruitstall' 类可以接受 0 个或多个水果变量。

HTML：

<div class="fruitstall(apple,orange)"></div>

脚本：

$('.fruitstall').click(function(event){
   if (get first variable value and check if it is an apple) {
      //Show apple image 
   } elseif (get the next variable value and check if it is an orange) {
      //Show orange image
   }
   alert('Number of fruit chosen are ' + (count number of variable passed to class) + ' ; ' fruit(index0) + fruit(index1));
});

请原谅我的水果摊示例，我认为以更生动的方式提问会很有趣。 :)

非常感谢。

【问题讨论】：

类不是这样工作的，它们只是标识符，而不是变量。您可以通过.fruitstall .apple .orange 添加多个类。虽然类不一定有定义的顺序，所以如果一阶和二阶很重要，而不是两个或多个条目，那么这是不合理的。
另外，通常，简化您的示例并不是一个好主意，因为您最终可能会得到不合适的解决方案。（或留下其他文字，.colourpicker）？
@Orbling ，操作，我输入了错误的类来检查点击，我编辑了它。应该是.fruitstall。错字。

标签： jquery class-variables

【解决方案1】：

另一种方法可能是使用 HTML5 数据属性：

<div class="fruitstall" data-fruits="apple,orange"></div>

那么你的 JS 代码可以去：

var fruits = $(this).data('fruits').split(',');

这将为摊位获取所有水果的数组。

【讨论】：

+1 这实际上是使用数据属性的完美示例。
HTML5 不兼容跨平台。世界上绝大多数浏览器都是老旧的蜗牛处理IE6。所以数据属性可能不是一个合适的解决方案。
@mmk：虽然这对于 HTML5 来说是正确的，但如果你只是使用一个额外的元素属性，那么你会很好——所有浏览器都会接受这一点。看看caniuse.com/#feat=dataset——“所有浏览器已经可以使用 data-* 属性并使用 getAttribute 访问它们。”
@mmk: IE6 远不是大多数，单个数字的使用。但是，HTML5 数据属性会在更多方面造成麻烦。
在阅读 getAttribute 兼容性列表后，我想我会最终确定并将其用作我的项目的解决方案。谢谢，您的答案将被选为答案！干杯。

【解决方案2】：

您可以分配多个类：

<div class="apple orange" id="divId"></div>

然后像这样对它们进行拆分：

var classList =$('#divId').attr('class').split(/\s+/);
$.each( classList, function(index, item){
    if (item=='someClass') {
       //do something
    }
});

来源：Get class list for element with jQuery

【讨论】：

没有别的办法了吗？我见过一些 Jquery 验证，其中包含名为 class="validate[required,custom[quantity],minCheckbox[1]]" 的类。它是如何工作的？
@mmk 这需要自定义解析类名，代码会非常复杂/繁琐。
@_onteria ：但如果这是唯一的方法，那么 Groovek 使用 AJAX JSON 的答案可能会奏效。
@mmk 1) 它使用 eval 并且应该使用适当的 JSON 解析器 2) 与使用拆分和处理单个元素相比，这有点多只是为了获得类名的标记

【解决方案3】：

我不知道这是否可行，但是如果您将 String 类准备为 JSON 类，则可以使用 eval() 获取一个可以从中枚举参数的对象

 function prepareAsJSON(className){
        var JSON = "{list:function" + className + "{return arguments}}"
        return JSON
 }

 var className = $("div").attr('class');
 var st = prepareAsJSON(className);
 var obj = eval(st)
 obj.list() //should return arguments as an array

我永远不会在生产代码中这样做，但这很有趣

干杯

Grooveek

【讨论】：

你的想法很有趣，但这有点奇怪。不过还是不错的尝试！ :)
@mmk ：我知道这很奇怪。更奇怪的是在类名中写函数，不是吗？奇怪的问题的答案太奇怪了...... :-D 想想很有趣，虽然