将多个相似的功能组合成一个

我已经通过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) 
});

我打赌你们知道如何处理这个问题！感谢您的帮助。

最好的问候，

托马斯

来源

2015-03-13 Thomasvd

给他们所有相同的类名，然后添加属性 “数据-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>

来源

2015-03-13 18:56:03

一个更好的方法是将这些项目分组给他们相同的类别，并使用一个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>

来源

2015-03-13 18:57:23 JLRishe

也许是更好的方法是把一个选择器在像'DATA- *'属性：''Show More 1，自举（2 OU 3，不记得）在一些组件中使用它 – 2015-03-13 19:02:14

@Sanção是的，我同意。谢谢！ – JLRishe 2015-03-13 19:05:27

将多个相似的功能组合成一个

回答

相关问题