试图重复删除jQuery代码

Question

我需要一些帮助，让jquery更高效一些。我已经尝试了各种方法，但我得到的是我能找到最好的唯一方法。基本上，我有6个面板彼此独立地切换...当一个面板可见时，无论哪个面板显示，其他5个面板都可以隐藏。

这里是JQuery的：

$("span.boxes ul li.one").click(function(){ 
    $("span.panel1").slideToggle(); 
    $("span.panel2").hide('slow'); 
    $("span.panel3").hide('slow'); 
    $("span.panel4").hide('slow'); 
    $("span.panel5").hide('slow'); 
    $("span.panel6").hide('slow'); 
    return false; 
}); 


$("span.boxes ul li.two").click(function(){ 
    $("span.panel2").slideToggle(); 
    $("span.panel3").hide('slow'); 
    $("span.panel4").hide('slow'); 
    $("span.panel5").hide('slow'); 
    $("span.panel6").hide('slow'); 
    $("span.panel1").hide('slow'); 
    return false; 
}); 

$("span.boxes ul li.three").click(function(){ 
    $("span.panel3").slideToggle(); 
    $("span.panel4").hide('slow'); 
    $("span.panel5").hide('slow'); 
    $("span.panel6").hide('slow'); 
    $("span.panel1").hide('slow'); 
    $("span.panel2").hide('slow'); 
    return false; 
}); 

$("span.boxes ul li.four").click(function(){ 
    $("span.panel4").slideToggle(); 
    $("span.panel5").hide('slow'); 
    $("span.panel6").hide('slow'); 
    $("span.panel1").hide('slow'); 
    $("span.panel2").hide('slow'); 
    $("span.panel3").hide('slow'); 
    return false; 
}); 

$("span.boxes ul li.five").click(function(){ 
    $("span.panel5").slideToggle(); 
    $("span.panel6").hide('slow'); 
    $("span.panel1").hide('slow'); 
    $("span.panel2").hide('slow'); 
    $("span.panel3").hide('slow'); 
    $("span.panel4").hide('slow'); 
    return false; 
}); 

$("span.boxes ul li.six").click(function(){ 
    $("span.panel6").slideToggle(); 
    $("span.panel1").hide('slow'); 
    $("span.panel2").hide('slow'); 
    $("span.panel3").hide('slow'); 
    $("span.panel4").hide('slow'); 
    $("span.panel5").hide('slow'); 
    return false; 
}); 

这里是HTML：

<span class="boxes"> 

<ul> 
<li class="one">Title 1</li> 
<li class="two">Title 2</li> 
<li class="three">Title 3</li> 
<li class="four">Title 4</li> 
<li class="five">Title 5</li> 
<li class="six">Title 6</li> 
</ul> 

</span> <!-- boxes --> 



<div id="panel-holder"> 

<span class="panel1"> 
<p>Title 1</p> 
</span> 

<span class="panel1"> 
<p>Title 2</p> 
</span> 

<span class="panel1"> 
<p>Title 3</p> 
</span> 

<span class="panel1"> 
<p>Title 4</p> 
</span> 

<span class="panel1"> 
<p>Title 5</p> 
</span> 

<span class="panel1"> 
<p>Title 6</p> 
</span> 

</div> <!-- #panel-holder --> 

感谢您的帮助; O）

Answer 1

你应该写一个自己的功能，其中包含的逻辑集中并为每个面板添加一个通用类名称（例如，<span class="panel1 panels">）：

function togglePanels(showPanel) { 
    $('span.panels:visible').hide(); // hides panels which are visible 
    showPanel.slideToggle(); // shows the particular panel you're providing in the parameter 
} 

的示例调用看起来像比这个和你节省大量的代码行，即使是逻辑分析，你可能需要更改一次：

$("span.boxes ul li.four").click(function(){ 
    togglePanels($("span.panel4")); 
}); 

Answer 2

changed your HTML。块元件不能在联元素，即，<p>的和<ul>的不能在<span>的

HTML

<ul id="links"> 
    <li class="link-1">Title 1</li> 
    <li class="link-2">Title 2</li> 
    <li class="link-3">Title 3</li> 
    <li class="link-4">Title 4</li> 
    <li class="link-5">Title 5</li> 
    <li class="link-6">Title 6</li> 
</ul> 

<div id="panels"> 
    <div class="panel-1"> 
     <p>Title 1</p> 
    </div> 
    <div class="panel-2"> 
     <p>Title 2</p> 
    </div> 
    <div class="panel-3"> 
     <p>Title 3</p> 
    </div> 
    <div class="panel-4"> 
     <p>Title 4</p> 
    </div> 
    <div class="panel-5"> 
     <p>Title 5</p> 
    </div> 
    <div class="panel-6"> 
     <p>Title 6</p> 
    </div> 
</div>​ 

JS

如对于JS，我们只绑定一个处理程序 - 使用.on()的父项。然后我们为每个链接分配一个数字，我们将在点击过程中提取这些数字然后我们找到匹配的面板并切换它，同时隐藏所有不匹配的其他面板。

$(function() { 
    $('#links').on('click','li',function() { 

     var itemNumber = this.className.split('-')[1];    

     $('#panels > div.panel-'+itemNumber).slideToggle(); 
     $('#panels > div:not(.panel-'+itemNumber+')').hide('slow'); 

     return false; 
    }); 
});​ 

CSS

#links li{ 
    display:inline-block; 
    padding: 10px; 
    background:#ccc; 
    margin-bottom:50px; 

} 

#panels > div{ 
    padding: 10px; 
    background:red; 
    margin-bottom:50px; 
    display:none; 
} 
​ 

Answer 3

使用index()方法：http://jsfiddle.net/C2PfW/

$("span.boxes ul li").on("click", function(){ 
    var $this = $(this); // each li 
    var panels = $("#panel-holder span"); 

    panels.hide(); 
    panels.eq($this.index()).slideDown(200); 

    return false; 
}); 

Answer 4

使用索引（）方法可以匹配eleemnt指数单击以元素的索引，你想展示。如果您将所有面板都设为普通类而不是编号，则会更清晰。

var $panels=$('[class^="panel"]'); 
$('.boxes li').click(function(){ 
    var index=$(this).index(); 
    $panels.not(':eq('+index+')').hide('slow'); 
    $panels.eq(index).slideToggle(); 

})