Попытка дедупликации кода JQuery - PullRequest
Новая
       5

Попытка дедупликации кода JQuery

1 голос
/ 25 марта 2012

Мне нужна помощь, чтобы сделать 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)

Ответы [ 4 ]

1 голос
/ 25 марта 2012

Используя метод index (), вы можете сопоставить индекс нажатой кнопки с индексом элемента, который вы хотите показать.Было бы намного чище, если бы вы дали всем панелям общий класс вместо нумерации классов 

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

})
0 голосов
/ 25 марта 2012

изменил ваш 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;
}
​
0 голосов
/ 25 марта 2012

Используйте метод 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; 
});
0 голосов
/ 25 марта 2012

Вы должны написать собственную функцию, которая централизованно содержит логику и добавить общее имя класса для каждой панели (например, <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"));
});
...