将多个相似的功能组合成一个
问题描述:
我已经通过*搜索了我认为是一个基本问题,但找不到任何相关的线程。主要是因为我觉得我正在寻找错误的关键字。将多个相似的功能组合成一个
我想知道如何总结下几行代码尽可能少。当你点击'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)
});
我打赌你们知道如何处理这个问题!感谢您的帮助。
最好的问候,
托马斯
答
给他们所有相同的类名,然后添加属性 “数据-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>
答
一个更好的方法是将这些项目分组给他们相同的类别,并使用一个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>
也许是更好的方法是把一个选择器在像'DATA- *'属性:''Show More 1,自举(2 OU 3,不记得)在一些组件中使用它 – 2015-03-13 19:02:14
@Sanção是的,我同意。谢谢! – JLRishe 2015-03-13 19:05:27