Question

我想使用Pines Steps。如何包含Pines Steps的文件。

当我运行此代码时，我遇到了两个错误（Inspect Element）。

未定义ReferenceError: jQuery未定义（第12行）

未捕捉TypeError: $(...).psteps不是一个功能（第51行）

请帮帮我。

<html>
<head>
    <script type="text/javascript" src="jquery.psteps.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

     <style>
        .step-title {
            min-height: 20px;
            float:left;
            border-radius: 0;
        }
        .next-button, .submit-button, .back-button {
            float:right;
            margin:3px;
        }
        @media(max-width:600px) {
            .step-content {
                margin-top: 10px;
            }
        }
        /* Vertical Styles */
        #psteps_simple .step-title {
            padding-left: 0;
            padding-right: 0;
            width: 99.5% !important;
            min-height: 28px;
            display: block;
        }
        #psteps_simple .step-title .step-order {
            float: left;
            margin-left: 12%;
        }
        #psteps_simple .step-title .step-name {
            float: left;
            margin-left: 2%;
        }
        #psteps_simple .step-title[class^="icon-"] {
            float: right;
            margin-right: 7%;
            margin-top: 2%;
        }

    </style>

    <script>
      $('#psteps_simple').psteps();
    </script>


</head>
<body>

    <div id="psteps_simple" class="row-fluid" style="margin-bottom:20px">
    <div class="span2">
    <div class="step-title"><span class="step-order">1.</span>  <span class="step-name">Step 1</span>
    </div>
    <div class="step-title"><span class="step-order">2.</span>  <span class="step-name">Step 2</span>
    </div>
    <div class="step-title"><span class="step-order">3.</span>  <span class="step-name">Step 3</span>
    </div>
    <div class="step-title"><span class="step-order">4.</span>  <span class="step-name">Step 4</span>
    </div>
    <div class="step-title"><span class="step-order">5.</span>  <span class="step-name">Step 5</span>
    </div>
</div>
<div class="span6 well clearfix">
    <div class="step-content">Step 1</div>
    <div class="step-content hide">Step 2</div>
    <div class="step-content hide">Step 3</div>
    <div class="step-content hide">Step 4</div>
    <div class="step-content hide">Step 5</div>
    <button class="next-button btn">Next Step</button>
    <button class="submit-button btn">Done</button>
    <button class="back-button btn">Back Step</button>
</div>
</div>

</body>
</html>

Answer 1

脚本"jquery.psteps.min.js"需要放在"jquery.min.js"之后，因为"jquery.psteps.min.js"取决于"jquery.min.js"。

第一个错误ReferenceError: jQuery来了，而加载jquery.psteps.min.js文件jQuery作为参数传递。
第二个错误TypeError: $(...).psteps出现了，因为在第一个错误中，jQuery被发现jquery.psteps.min.js，因此未加载到内存中。

找到以下内容：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.psteps.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

第三个错误：Uncaught TypeError: (intermediate value)(intermediate value)(...)，是因为您在加载$('#psteps_simple').psteps(); div元素之前调用psteps_simple。对于此$('#psteps_simple').psteps();函数内的$(document).ready()来电。

使用以下代码：

<script>
     $(document).ready(function() {
        $('#psteps_simple').psteps();
    });
</script>

松树步骤包括文件

1 个答案: