Объединение нескольких аналогичных функций в один

Question

Я просматривал через StackOverflow то, что я рассматриваю как основную проблему, но я не смог найти соответствующие потоки. В основном потому, что я чувствую, что ищу неправильные ключевые слова.

Я хотел бы знать, как суммировать следующий бит как можно меньше строк кода. Когда вы нажимаете «link- #», он загружает содержимое из скрытого div «more-#» (где число # больше может быть любым числом, но совпадает с номером в link- #.) Прямо сейчас я есть это:

jQuery("#link-1").click(function(){ 
    jQuery('#more').hide().html($('#more-1').html()).fadeIn(400) 
}); 
jQuery("#link-2").click(function(){ 
    jQuery('#more').hide().html($('#more-2').html()).fadeIn(400) 
}); 
jQuery("#link-3").click(function(){ 
    jQuery('#more').hide().html($('#more-3').html()).fadeIn(400) 
}); 

т.д.

Я предполагаю, что это должно быть что-то вроде ниже, но, очевидно, это не правильный путь.

jQuery("#link" + NUMBER).click(function(){ 
    jQuery('#more').hide().html($('#more-' + this.NUMBER).html()).fadeIn(400) 
}); 

Бьюсь об заклад, вы, ребята, точно знаете, как бороться с этим! Спасибо за помощь.

С наилучшими пожеланиями,

Томас

Answer 1

дать им все то же имя класса, а затем добавить атрибут "данные-Num", а затем:

jQuery(".className").click(function() { 
    var $this = $(this); 
    var html = jQuery('#more' + $this.attr('data-num')).html(); 
    jQuery('#more').hide().html(html); 
}); 

продукта примера HTML:

<a class='className' data-num='1'>Link</a> 
<div id='more1'></div> 
<div id='more'></div> 

Answer 2

Предпочтительный подход состоит в том, чтобы сгруппировать эти элементы, предоставив им один и тот же класс и использовать атрибут data-*, чтобы идентифицировать соответствующий элемент:

jQuery(function() { 
 
    jQuery(".show-more").click(function() { 
 
    var target = $(this).data('target'); 
 
    jQuery('#more').hide().html($(target).html()).fadeIn(400); 
 
    }); 
 
});

#moreItems { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<a href="#" class="show-more" data-target="#more-1">Show More 1</a> 
 
<a href="#" class="show-more" data-target="#more-2">Show More 2</a> 
 
<a href="#" class="show-more" data-target="#more-3">Show More 3</a> 
 
<div id="more"></div> 
 
<div id="moreItems"> 
 
    <div id="more-1">Here are the details 1</div> 
 
    <div id="more-2">Here are the details 2</div> 
 
    <div id="more-3">Here are the details 3</div> 
 
</div>