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

Question

我想做一个show/hide功能，点击并识别元素的data-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

您可以使用this在点击事件的回调中引用被点击的元素： $('a').click(function() { console.log(this.dataset.id); })

Answer 2

您可以为 <a> 设置相同的 class 并试试这个：

<a class="sameClass" href="#" data-id="s1">a1</a>

$('.sameClass').click(function() {

    var dataId = $(this).data('id');

    $('div[data-value="' + dataId + '"]').show();

});

Answer 3

单击 <a> 时：
获取其[data=id]
然后通过.each()<div>求其[data-value]
并比较每个值和 .show() <div> 是否匹配。

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

$('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>

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

How to write a jQuery function will data-id loop in order to show a certain element?

jquery

html

css

custom-data-attribute