Question

这更像是一种“可以发生这种情况”的问题。

我正在设置本地存储空间，以便记住此人正在使用的标签。我的问题是，在不同的项目之间，他们想要记住他们在该特定项目中所做的工作。

要保存这些选项卡，我在选项卡本身上设置数据属性，然后在jQuery中调用它以将该选项卡显示在任何其他选项卡之上。

理想情况下，我希望数据属性具有动态名称。我可以通过拉入项目ID轻松地在html中设置这个，但是我试图弄清楚是否可以使用那个函数在jQuery中调用该数据属性。

所以在我的HTML中我有一些看起来像这样的东西

data-tab{{id}}="name"

然后我在没有id的情况下这样称呼他们。但是现在有了这个独特的名字，我真的不知道如何在没有复制函数十亿次的情况下抓取属性来调用，这在这种情况下是不可能的。

$(this).attr('data-tab');

任何帮助都会很棒！

Answer 1

您可以尝试这种方式：

$.fn.getDynamicAttrVal = function(attrMatch){

  if(!attrMatch)return;

  var data = this.data(), //Get the data for the element
      keys = Object.keys(data), //Get all the keys which are attribute names
      value;


  $.each(keys, function(_, key){
    if(attrMatch.test(key)){ //Test for the pattern passed in against the key
      value =  data[key]; //If found get the value
      return false; //break the loop;
     }
  });

  return value;
}

并将其调用为：

$('elmSel').getDynamicAttrVal(/tab*/);
$('elmSel2').getDynamicAttrVal(/tab*/);

<强> JSBin

Answer 2

这会匹配元素的所有属性的正则表达式，并获取第一个匹配的值。

var value = $(this.attributes).filter(function () {
    return this.name.match(/^data-tab/);
}).val();

alert(value);

http://jsfiddle.net/tN3gj/

Answer 3

在你的JavaScript中，attr的参数只是一个字符串。因此，如果您想使用动态名称，只需创建一个字符串：

var id = 6;

console.log( $(this).attr('data-tab' + id) );
// this is the same as .attr('data-tab6');

......或者我误解了你的问题？

动态数据属性

3 个答案: