jquery - 如何编写一个 jQuery 函数将 data-id 循环以显示某个元素？

Question

我想做一个显示/隐藏功能，点击并识别元素的数据ID，将显示具有相同ID的相关元素。

我知道我能做到:

$('a[data-id="s1"]').click(function() {
  $(div[data-value="s1"]).show();
});
$('a[data-id="s2"]').click(function() {
  $(div[data-value="s2"]).show();
});
$('a[data-id="s3"]').click(function() {
  $(div[data-value="s3"]).show();
});

...等等，但是代码会很长。

所以我只是想知道我是否可以将这些 id 制作成一个数组，然后在 jquery 中循环它们，这样我就可以获得一个干净的代码。

我希望以上所有内容都可以在一个函数中完成，我可以分别识别 s1/s2/s3...。

非常感谢您阅读我的问题，我希望能从你们那里学到更多。非常感谢!

Answer 1

• 当 <a>被点击:
• 获取其[data=id]的值
• 然后通过.each() <div>找到它的值 [data-value]
• 并比较每个值和.show() <div>匹配时。

鉴于 OP 中的信息，这是最全面和通用的方法。如果没有更多信息(如 HTML、类等)，“clean one function”选项是不可行的。

$('a').on('click', function() {
  var id = $(this).data('id');
  $('div').each(function() {
    var value = $(this).data('value');
    if (value === id) {
      $(this).show()
    }
  });
});

hr~div {
  display: none
}

<a href='#/' data-id='0'>0</a>
<a href='#/' data-id='1'>1</a>
<a href='#/' data-id='2'>2</a>
<hr>
<div data-value='0'>0</div>
<div data-value='1'>1</div>
<div data-value='2'>2</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>