0

我正在尝试以编程方式处理 Jquery UI 手风琴的切换我希望如果有人单击下一步按钮然后在添加隐藏字段后进入下一步这是我在代码中编写的内容：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pro Plan Store</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$(document).ready(function(){

  $("#changeStep").on("click",function(){
        $("#step1content").append("<input type='hidden' name='step1done' id='step1done' value=''>");

    $('#accordion').accordion('option', 'active', 1);
  });

    var accordian = $( "#accordion" ).accordion({
        active: false,
        beforeActivate: function(event, ui) {
            var newIndex = $(ui.newHeader).index('h3');
            console.log(newIndex);        
            switch(newIndex){
                case 0:
                 //   $(this).accordion( "option", "active", 0 ); //Main page just set it to homepage again
                break
                case 1:
                    if($("#step1done").length > 0){
                        $(this).accordion( "option", "active", 1 ); //Main page just set it to homepage again
                    }
                    else{
                        alert("Please login first to choose plan"); 
                        event.preventDefault();
                    }
                break
                case 2:
                break                
            }

    }
    });



});
</script>
</head>
<body>
<div id="accordion">
    <h3 id="logmein">Welcome Pro Plan Store</h3>
        <div id="step1content">
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
            </p>

          <input type="button" value="Next" id="changeStep" />




        </div>
    <h3 id="chooseplan">Choose Plan</h3>
    <div id="step2content">
        <p>
            Choose Plan Here
        </p>
    </div>

    <h3 id="zoura">Checkout</h3>
    <div id="step3content">
        <p>
            Zoura Iframe
        </p>

    </div>

</div>
</body>
</html>

但是当我运行它并在控制台中看到它时，它给了我太多的递归错误。如以下错误所示：

在此处输入图像描述

难道我做错了什么？？我正在使用所有稳定版本的库。我还通过模拟手风琴头部元素的点击来尝试它，但我得到了同样的错误

4

2 回答 2

3

这与您编写的代码有关：您试图通过首先单击下一个按钮时执行 $('#accordion').accordion('option', 'active', 1) 来激活“选择面板”控制板。

在被激活之前，控件转到 beforeActivate 方法。但是在 beforeActivate 方法中，您正在尝试激活同一个面板。现在控件在被激活之前再次进入 beforeActivate 方法，因此处于死锁状态。

为什么要在 beforeActivate 方法中激活相同的手风琴？这永远不会奏效。

于 2013-06-12T10:49:27.443 回答
1

好的，感谢 Rag Answer 我能够找到我的问题，我只需要按照我的逻辑要求防止 Dafult 行为，因此我的代码将变成这样：

 <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Pro Plan Store</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script>
    $(document).ready(function(){

      $("#changeStep").on("click",function(){
            $("#step1content").append("<input type='hidden' name='step1done' id='step1done' value=''>");

        $('#accordion').accordion('option', 'active', 1);
      });

        var accordian = $( "#accordion" ).accordion({
            active: false,
            beforeActivate: function(event, ui) {
                var newIndex = $(ui.newHeader).index('h3');
                console.log(newIndex);        
                switch(newIndex){
                    case 0:
                     //   $(this).accordion( "option", "active", 0 ); //Main page just set it to homepage again
                    break
                    case 1:
                        if($("#step1done").length < 0){
                            alert("Please login first to choose plan"); 
                            event.preventDefault();
                        }
                    break
                    case 2:
                    break                
                }

        }
        });



    });
    </script>
    </head>
    <body>
    <div id="accordion">
        <h3 id="logmein">Welcome Pro Plan Store</h3>
            <div id="step1content">
                <p>
                Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
                ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
                amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
                odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
                </p>

              <input type="button" value="Next" id="changeStep" />




            </div>
        <h3 id="chooseplan">Choose Plan</h3>
        <div id="step2content">
            <p>
                Choose Plan Here
            </p>
        </div>

        <h3 id="zoura">Checkout</h3>
        <div id="step3content">
            <p>
                Zoura Iframe
            </p>

        </div>

    </div>
    </body>
    </html>
于 2013-06-12T11:08:46.807 回答