Как написать функцию jQuery будет цикл data-id для того, чтобы показать определенный элемент?

Question

Я хочу сделать функцию показать / скрыть, щелкнув и идентифицировав идентификатор данных элемента, будет показан относительный элемент с таким же идентификатором.

Я знал, что могу сделать:

$('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();
});

... и т. Д., Но код будет таким длинным.

Поэтому мне просто интересно, смогу ли я сделатьэти идентификаторы похожи на массив, а затем зацикливают их в jquery так, чтобы у меня был чистый код.

Я ожидаю, что все вышеперечисленное может быть выполнено в рамках одной функции, которую я могу идентифицировать s1 / s2 / s3 ... отдельно.

Большое спасибо за чтение моего вопроса, и я надеюсь, чтоузнать больше от вас, ребята.Большое вам спасибо!

Answer 1

• При нажатии <a>:
• получить значение [data=id]
• , затем пройти через .each() <div>, чтобы найти значение его [data-value]
• и сравните каждое значение и .show() <div> при сопоставлении.

Это наиболее всеобъемлющий и общий подход, учитывая информацию в OP.Опция " clean one function" невозможна без дополнительной информации, такой как HTML, классы и т. Д.

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

Answer 2

Вы можете ссылаться на элемент clicked внутри обратного вызова события click, используя this: $('a').click(function() { console.log(this.dataset.id); })

Answer 3

вы можете установить тот же класс для <a> и попробовать это:

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

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

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

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

});