Невозможно использовать JavaScript (функцию) дважды

0

В верхней части моего HTML-документа у меня есть этот код JavaScript для слайдеров аккордеона.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" >
    var gCurrentIndex = 0; // global variable to keep the current index;
    var ACCORDION_PANEL_COUNT = 3; //global variable for panel count. Here 3 is for zero based accordion index

    $(document).ready(function () {
            wizard = $("#accordion").accordion({
                                event: 'click',
                                active: 9,
                                autoheight: true,
                                animated: "bounceslide",
                                icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                                change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }
    });

    //Bind event for previous and next buttons
    $('.previous,.next').click(function () {
            var index = 0;
            if ($(this).hasClass('next')) {
                    index = gCurrentIndex + 1;
                    if (index > ACCORDION_PANEL_COUNT ) {
                            index = ACCORDION_PANEL_COUNT;
                    }
            }
            else {
                    index = gCurrentIndex - 1;
                    if (index < 0) {
                           index = 0;
                    }
            }

    //Call accordion method to set the active panel
      wizard.accordion("activate", index);
    });
});

Затем, дальше по моему файлу HTML, у меня есть этот код, начиная с Аккордеона div для моего слайдера

<div id="accordion" style="padding:5px;">
        <h4><a onclick="document.getElementById('accordion').style.margin='-30px 0 0 0'"></a></h4>

Итак, под этим аккордеонным div все мое содержание, что в аккордеоне, оно отлично работает! Однако, когда я пытаюсь создать второй аккордеон div позже в моем файле HTML, который не работает.

Мой вопрос: как я могу использовать эффект аккордеона несколько раз на моем веб-сайте?

  • 0
    Можете ли вы показать неработающий пример? Я предполагаю, что вы повторно использовали id на втором аккордеоне, который является недействительной разметкой.
  • 0
    Этот wizard = $("#accordion").accordion({... строки wizard = $("#accordion").accordion({... инициализировал wizard = $("#accordion").accordion({... для элемента с идентификатором 'accordian' . Идентификаторы элемента должны быть уникальными. Чтобы использовать несколько элементов, ссылайтесь на них по имени класса или перечислите идентификаторы ,
Теги:
function
accordion

3 ответа

0
Лучший ответ

Идентификаторы в DOM должны быть уникальными. Мне кажется, что вы пытаетесь создать несколько DIV с одинаковым идентификатором ("аккордеон").

Если вы хотите иметь более одного, вы должны использовать параметр класса.

Поэтому используйте $(".accordion") вместо $("#accordion")

и <div class="accordion" style="padding:5px;"> вместо <div id="accordion" style="padding:5px;">

0

Убедитесь, что селектор в вашем коде будет ссылаться на оба элемента аккордеона:

            wizard = $("#accordion,#accordion2").accordion({ //selector looks at both div IDs
                            event: 'click',
                            active: 9,
                            autoheight: true,
                            animated: "bounceslide",
                            icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                            change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }

Также измените второй код DIV onclick на новый идентификатор div:

onclick="document.getElementById('accordion2').style.margin='-30px 0 0 
0

Попробуй это:

function accordionDiv(){
        var gCurrentIndex = 0; // global variable to keep the current index;
        var ACCORDION_PANEL_COUNT = 3; //global variable for panel count. Here 3 is for zero based accordion index

        $(document).ready(function () {
                wizard = $("#accordion").accordion({
                                    event: 'click',
                                    active: 9,
                                    autoheight: true,
                                    animated: "bounceslide",
                                    icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' },
                                    change: function (event, ui) { gCurrentIndex = $(this).find("h4").index(ui.newHeader[0]); }
        });

        //Bind event for previous and next buttons
        $('.previous,.next').click(function () {
                var index = 0;
                if ($(this).hasClass('next')) {
                        index = gCurrentIndex + 1;
                        if (index > ACCORDION_PANEL_COUNT ) {
                                index = ACCORDION_PANEL_COUNT;
                        }
                }
                else {
                        index = gCurrentIndex - 1;
                        if (index < 0) {
                               index = 0;
                        }
                }

        //Call accordion method to set the active panel
          wizard.accordion("activate", index);
        });
    });
}

И вызывайте функцию accordionDiv() каждый раз, когда вам это нужно.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню