动态数据属性

Question

这更像是一个“会不会发生”的问题。

我正在设置本地存储，以记住这个人在做什么标签。我的问题是，在不同的项目之间，他们想要记住他们在那个特定项目中做了什么。

为了保存这些选项卡，我在选项卡本身上设置一个数据属性，然后在jQuery中调用它，以显示该选项卡高于其他选项卡。

不过，理想情况下，我希望拥有数据属性来具有动态名称。通过输入项目id，我可以在html中很容易地设置该属性，但我正在试图找出是否可以仅使用该函数在jQuery中调用该数据属性。

所以在我的html中我有这样的东西

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

然后我在没有身份证的情况下这样叫他们。但是现在，使用唯一的名称，我不太确定如何获取要调用的属性而不复制函数10亿次，在这种情况下这是不可能的。

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

任何帮助都是很棒的！

Answer 1

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

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

alert(value);

http://jsfiddle.net/tN3gj/

Answer 2

你可以试试这个方法：

$.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 3

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

var id = 6;

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

...or我误解你的问题了吗？