javascript - 使用 jQuery 遍历多种数据类型

Question

背景信息

您好，我不确定这是否可行，但是我正在尝试找出一种方法来运行一堆数据类型并根据它更改文本。我知道您可以通过编写每种数据类型然后编辑相关类来做到这一点。但是，我计划拥有大量数据类型，因此正在寻找一种节省时间的解决方案。

所以我的计划是让很多信息链接到某个div，这样当点击它可以根据数据更新信息部分。所有数据类型都将具有相同的数据测试-

<div class="box" data-test-1="1.1" data-test-2="1.2" data-test-3="1.3"></div>
<div class="box" data-test-1="2.1" data-test-2="2.2" data-test-3="2.3"></div>
<div class="box" data-test-1="3.1" data-test-2="3.2" data-test-3="3.3"></div>

问题

我可以使用 jQuery 运行所有数据测试-""当框被单击时，然后将它们链接到匹配 ID。

简化版- https://jsfiddle.net/gaLLms9b/2/

Answer 1

您可以循环所有数据集属性，
一旦你匹配数据集是这种格式:

^     // start of string
test- // has "test-"
\d+   // one or more numbers
$     // end of string

如果您只对数据的格式感兴趣:

data-static-variable

你可以简单地使用这个RegExp:/^static-/

您可以像这样使用实际数据-key 和val:

$(".box").click(function() {
  $.each(this.dataset, function(key, val) {
    if(/^test-\d+$/.test( key )){ // make sure the data is "test-N(N..)"
      $("#data-"+ key).html( val );
    }
  });
});

.box {
  width: 100px;
  height: 100px;
  border: solid black 1px;
  background-color: #f3f3f3;
  cursor: pointer;
}

.box:hover {
  background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box" data-foo="bar" data-test-1="1.1" data-test-2="1.2" data-test-3="1.3"></div>
<div class="box" data-test-1="2.1" data-test-2="2.2" data-test-3="2.3"></div>
<div class="box" data-test-1="3.1" data-test-2="3.2" data-test-3="3.3"></div>

<p id="data-test-1">Click on the boxes to change information</p>
<p id="data-test-2">Infor 2</p>
<p id="data-test-3">Infor 3</p>
<p id="data-foo">This should be left unchanged cause does 
    not matches the needed data test-N(N..) format </p>