試圖重複刪除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(); 

})