javascript - 将多个相似的功能合而为一

我已经在StackOverflow上搜索了我认为是基本问题的内容，但是找不到任何相关的线程。主要是因为我觉得自己在搜索错误的关键字。

我想知道如何将下一部分汇总到尽可能少的代码行中。当您单击“ link-＃”时，它将从隐藏的div“ more-＃”中加载内容（其中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)
});

我敢打赌，你们确切知道该如何处理！谢谢您的帮助。

最好的祝福，

汤玛士

最佳答案

给他们全部相同的类名，然后添加属性“ data-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>

关于javascript - 将多个相似的功能合而为一，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29039830/