Несколько гармошкой на одной странице


У меня две гармошки на той же странице

Во-первых, у меня есть страница, по Freemarker, который включает в себя два других Freemarkers, что у аккордеона.

[#include "page1.ftl"]
[#include "page2.ftl"]

На page1:

<h3 class="trigger"><div id="toggle-image">&nbsp;&nbsp;&nbsp;&nbsp;Page1</div></h3>
<div class="toggle-container">

На страница2:

<h3 class="trigger2"><div id="toggle-image2">&nbsp;&nbsp;&nbsp;&nbsp;Page2</div></h3>
<div class="toggle-container2">

В файл JavaScript:

$(document).ready(function(){
  $('#toggle-image').attr("class", "toggle-image-expand");
    //Hide (Collapse) the toggle containers on load
    $(".toggle-container").hide();

    $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");

        if($('#toggle-image').attr("class") == "toggle-image-collapse") {
            $('#toggle-image').attr("class", "toggle-image-expand");
        } else {
            $('#toggle-image').attr("class", "toggle-image-collapse");
        }
        return false;
    });
});

$(document).ready(function(){
  $('#toggle-image2').attr("class", "toggle-image-expand");
    //Hide (Collapse) the toggle containers on load
    $(".toggle-container2").hide();

    $("h3.trigger2").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");

        if($('#toggle-image2').attr("class") == "toggle-image-collapse") {
            $('#toggle-image2').attr("class", "toggle-image-expand");
        } else {
            $('#toggle-image2').attr("class", "toggle-image-collapse");
        }
    return false;
});

Он отлично работает, но избыточный код, который я использовал в JS является типичным и разница на переменную, он использует. Как я могу сделать его динамическим?



2163
2
задан 18 сентября 2011 в 05:09 Источник Поделиться
Комментарии
1 ответ


  1. Не полагаться на идентификаторы, когда ваши дела общие. Полагаться на классы.

  2. Использовать иерархию DOM для опорных элементов

страница1 (добавлен в контейнер div, "тумблер-изображения" имя класса):

<div>
<h3 class="trigger">
<div id="toggle-image" class="toggle-image">
&nbsp;&nbsp;&nbsp;&nbsp;Page1
</div>
</h3>
<div class="toggle-container">
</div>
</div>

Страница 2 (же изменения):

<div>
<h3 class="trigger">
<div id="toggle-image2" class="toggle-image">
&nbsp;&nbsp;&nbsp;&nbsp;Page2
</div>
</h3>
<div class="toggle-container">
</div>
</div>

На JavaScript (обобщенная с селекторов класса, селекторы брат, улучшена логика класс):

 $(document).ready(function(){
$('.toggle-image').attr("class", "toggle-image-expand");
//Hide (Collapse) the toggle containers on load
$(".toggle-container").hide();

$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");

$(this).children('.toggle-image')
.toggleClass('toggle-image-collapse')
.toggleClass('toggle-image-expand');

return false;
});
});

1
ответ дан 18 сентября 2011 в 05:09 Источник Поделиться