Javascript 帮助优化一些功能正常的jQuery
我有一些简单的jQuery,它添加了一些选项卡功能。这是基于我在某处发现的东西(不记得在哪里),但在这一点上它可能是最原始的。我遇到了一些选择器的问题,所以我不得不做一些看起来很尴尬的事情(参见.children().children部分)。尴尬的部分源于添加了在一个页面上处理多组选项卡的能力 我是否可能使用了错误的选择器?你能看到这里还有什么可以改进的地方吗 以下是jQuery:Javascript 帮助优化一些功能正常的jQuery,javascript,jquery,html,jquery-selectors,Javascript,Jquery,Html,Jquery Selectors,我有一些简单的jQuery,它添加了一些选项卡功能。这是基于我在某处发现的东西(不记得在哪里),但在这一点上它可能是最原始的。我遇到了一些选择器的问题,所以我不得不做一些看起来很尴尬的事情(参见.children().children部分)。尴尬的部分源于添加了在一个页面上处理多组选项卡的能力 我是否可能使用了错误的选择器?你能看到这里还有什么可以改进的地方吗 以下是jQuery: // Create and manage tab blocks $('.tab-sections section'
// Create and manage tab blocks
$('.tab-sections section').hide(); // Hide all tabs
$('.tab-list').each(function(){ // Make the first tab active
$('.tab-list li:first-child').addClass('active');
});
$('.tab-sections').each(function(){ // Make the first tab's content visible
$('.tab-sections section:first-child').show();
});
$('.tab-list li').click(function() {
$(this).siblings().removeClass('active'); // Remove any "active" class
$(this).addClass('active'); // Add "active" class to selected tab
// Hide tabs. This looks awkward, but .children('.tab-sections section') wouldn't work
$(this).parents('.tab-block').children('.tab-sections').children('section').hide();
// Find the href attribute value to identify the active tab + content
var activeTab = $(this).find('a').attr('href');
$(activeTab).fadeIn('fast'); // Fade in the active ID content
return false;
});
以下是HTML:
<div class="tab-block grad-tabs">
<ul class="tab-list">
<li><a href="#tab1" title="tab 1">Tab 1</a></li>
<li><a href="#tab2" title="tab 2">Tab 2</a></li>
<li><a href="tab3" title="tab 3">Tab 3</a></li>
</ul>
<div class="tab-sections">
<section id="tab1">
<h2>Tab 1</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section id="tab2">
<h2>Tab 2</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</section>
<section id="tab3">
<h2>Tab 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</div>
</div>
表1
除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡
表2
两人或两人在一个无教区的房间里互相指责
表3
知识产权是一种权利,是一种精英的权利,是劳动和财富的暂时性权利
您可以再做一些改进,对于您的主要问题,您可以使用来解决问题,而不是此:
$(this).parents('.tab-block').children('.tab-sections').children('section').hide();
进入.tab块
,然后使用您想要的内容,如下所示:
$(this).closest('.tab-block').find('.tab-sections section').hide();
$('.tab-sections section:not(:first-child)').hide(); // Hide all content that not the first
$('.tab-list li:first-child').addClass('active');
$('.tab-list li').click(function() {
$(this).addClass('active').siblings().removeClass('active'); // Add "active" class to selected tab, remove any other "active" class
$(this).closest('.tab-block').find('.tab-sections section').hide(); // Hide tabs.
var activeTab = $(this).find('a').attr('href'); // Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn('fast'); // Fade in the active ID content
return false;
});
对于其余的,是的,有更多的优化,不需要初始循环,因为它们都重复做相同的事情,您可以进一步优化处理程序中的初始隐藏和链接,如下所示:
$(this).closest('.tab-block').find('.tab-sections section').hide();
$('.tab-sections section:not(:first-child)').hide(); // Hide all content that not the first
$('.tab-list li:first-child').addClass('active');
$('.tab-list li').click(function() {
$(this).addClass('active').siblings().removeClass('active'); // Add "active" class to selected tab, remove any other "active" class
$(this).closest('.tab-block').find('.tab-sections section').hide(); // Hide tabs.
var activeTab = $(this).find('a').attr('href'); // Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn('fast'); // Fade in the active ID content
return false;
});
如果您使用的是jQuery 1.4.1+,您甚至可以通过以下方式进一步优化:
$('.tab-list li').click(function() {
为此:
$('.tab-list').delegate('li', 'click', function() {
这将为每个
选项卡列表元素附加一个单击处理程序,而不是为每个附加一个处理程序。您可能对此感兴趣
var sections = $('.tab-sections section');
sections.hide();
$('.tab-list li:first-child').addClass('active');
$('.tab-sections section:first-child').show();
$('.tab-list').delegate("li", "click", function() {
$(this).addClass('active').siblings().removeClass('active');
sections.hide();
var activeTab = $(this).children('a').attr('href');
$(activeTab).fadeIn('fast');
});
在这里,我缓存了这些节,因为在页面操作期间它被多次使用
再次使用jquery方法,而不是向3个li
元素中的每个元素添加1个单击事件
您可以找到一个工作示例,但我想您也可以看看。这会导致页面中出现多个.tab部分(或任何其他部分),OP列出了一个问题。@Nick然后我们可以使用$().data()
来缓存该值