Пытается дедуплицировать код 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 --> 

Спасибо за вашу помощь; о)

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> 's не может быть в <span> «s

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(); 

})