программно настроить slideToggle для любого количества элементов

Question

У меня есть следующий код jQuery, который отлично работает:

$(document).ready(function () {
    $('#link1').click(function () {
    $('.data1').slideToggle('slow');
    });
    $('#link2').click(function () {
    $('.data2').slideToggle('slow');
    });
    /* so on a so forth */
});

link1 - это идентификатор, который у меня есть для тега div вокруг гиперссылки.Данные1 - это идентификатор другого тега div для содержимого, которое я хочу отображать, если пользователь нажимает гиперссылку.Мой вопрос заключается в том, что если у меня есть 50 или даже 100 гиперссылок и контент, который связан с каждой из них, было бы неудобно перечислять этот код 50 или 100 раз с каждым ID, указанным отдельно.

Как я могу это сделатьпрограммно?Я попытался настроить цикл for, но, вероятно, синтаксис облажался.Я также попытался использовать функцию «each ()».

Любая помощь будет принята с благодарностью.

Answer 1

Самый простой способ - определить класс для них, а также лучший идентификатор. Я бы сказал что-то вроде этого:

<a href="#" id="link_1" class="toggle_link">Link 1 Text</a>
<div class="data_1">Fos</div>

<a href="#" id="link_2" class="toggle_link">Link 2 Text</a>
<div class="data_2">Fos Fos</div>

Тогда вы можете легко прикрепить ваши события, как:

$('.toggle_link').click(function () {
  var name=this.id.split('_');
  $('.data_'+name[1]).slideToggle('slow');
});

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