无法使用JavaScript（函数）两次

在我的HTML文档的顶部，我有这个用于手风琴滑块的JavaScript代码。无法使用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 id="accordion" style="padding:5px;"> 
     <h4><a onclick="document.getElementById('accordion').style.margin='-30px 0 0 0'"></a></h4>

所以下面的是，里面的手风琴格在我所有的内容，多数民众赞成手风琴，它很棒！但是，当我尝试在我的HTML文件中稍后创建第二个手风琴div时，其中一个不起作用。

我的问题：如何在我的网站中多次使用手风琴效果？

来源

2014-03-04 user3379220

您可以显示无功能的例子吗？我的猜测是你在第二个手风琴上重新使用了'id'，这是无效的标记。 – David

这条线'向导= $（“＃accordion”）。accordion（{...'初始化了元素的手风琴，手风琴的ID为''''''）元素ID必须是唯一的。 classname或列出id。 – Moob

IDS DOM中的应独一无二。它看起来像你正在试图创建几个具有相同ID（'手风琴'）的DIV。

如果你想有多个你应该使用类参数。

因此，使用$(".accordion")代替$("#accordion")

和<div class="accordion" style="padding:5px;">，而不是<div id="accordion" style="padding:5px;">

来源

2014-03-04 13:39:18

试试这个：

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()功能每次你需要它的时候。

来源

2014-03-04 13:36:36 csanonymus

确保在代码中选择将引用两个手风琴元素：

  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 ID：

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

来源

2014-03-04 13:38:03 user1442605

无法使用JavaScript（函数）两次

回答

相关问题