文章/答案/技术大牛

发布

问实现jQuery动画表单
EN

Stack Overflow用户

提问于 2018-02-17 02:58:57

回答 1查看 56关注 0票数 0

我刚接触Java和它的模块，我相信我已经按照我找到的指令使这个动画形式和其他形式运行，但我似乎不能让它们工作。

对于主要的注册表单，我使用了来自https://codepen.io/atakan/pen/gqbIz/的模板，在稍微修改了文本之后，将元素复制到三个文件中: /test.php - /index_style.css和javascript.js

下面是我所拥有的代码：

<html>
    <head>
        <title>Flight One | Flying Passion</title>
        <link rel="stylesheet" href="/CSS/index_style.css" style="text/css">
        <link rel="stylesheet/less" type="text/css" href="/CSS/styles.less" />
        <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js" ></script>
        <script src="/US/en/local/Ressources/Java/javascript.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <form id="msform">
                                    <!-- progressbar -->
                                  <ul id="progressbar">
                                    <li class="active">Account Setup</li>
                                    <li>Social Profiles</li>
                                    <li>Personal Details</li>
                                  </ul>
                                  <!-- fieldsets -->
                                  <fieldset>
                                    <h2 class="fs-title">Create your account</h2>
                                    <h3 class="fs-subtitle">This is step 1</h3>
                                    <input type="text" name="email" placeholder="Email" onkeypress="return isNumberKey(event)" />
                                    <input type="password" name="pass" placeholder="Password" />
                                    <input type="password" name="cpass" placeholder="Confirm Password" />
                                    <input type="button" name="next" class="next action-button" value="Next" />
                                  </fieldset>
                                  <fieldset>
                                    <h2 class="fs-title">Social Profiles</h2>
                                    <h3 class="fs-subtitle">Your presence on the social network</h3>
                                    <input type="text" name="twitter" placeholder="Twitter" />
                                    <input type="text" name="facebook" placeholder="Facebook" />
                                    <input type="text" name="gplus" placeholder="Google Plus" />
                                    <input type="button" name="previous" class="previous action-button" value="Previous" />
                                    <input type="button" name="next" class="next action-button" value="Next" />
                                  </fieldset>
                                  <fieldset>
                                    <h2 class="fs-title">Personal Details</h2>
                                    <h3 class="fs-subtitle">We will never sell it</h3>
                                    <input type="text" name="fname" placeholder="First Name" />
                                    <input type="text" name="lname" placeholder="Last Name" />
                                    <input type="text" name="phone" placeholder="Phone" />
                                    <textarea name="address" placeholder="Address"></textarea>
                                    <input type="button" name="previous" class="previous action-button" value="Previous" />
                                    <input type="submit" name="submit" class="submit action-button" value="Submit" />
                                  </fieldset>
                                </form>
    </body>
</html>

我完全复制了模板中的CSS代码，并将完全相同的java脚本插入到我的javascript.js文件中。

当我使用像"upperCaseF(this)“这样的简单java函数时，它从链接的文件运行，而不是从其他函数运行。

我真的四处寻找解决方案，仍然不明白为什么它可以在他们的模拟器上运行，而不是在我这边运行。

我正在使用Sublime Text和MAMP，但即使我上传到我的网站上，它也不起作用……

谢谢你的帮助!

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-17 03:19:54

您是在加载框架之前加载jquery代码的。

您的标题应如下所示：

    <head>
    <title>Flight One | Flying Passion</title>
    <link rel="stylesheet" href="/CSS/index_style.css" style="text/css">
    <link rel="stylesheet/less" type="text/css" href="/CSS/styles.less" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.0.0/less.min.js" ></script>
    <!-- TODO Verify what version of jquery is needed -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- TODO Verify what version of jquery is needed -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

    <!-- loading custom jquery code here -->
    <script src="/US/en/local/Ressources/Java/javascript.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

此外，您还应该像这样(如果您还没有这样做)向您的自定义代码添加一个就绪事件(在本例中，因为您是在header标记中加载它)：

$(document).ready(function() {
    // TODO Add your jQuery code in here.
});

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48833246

复制

相似问题

问实现jQuery动画表单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现jQuery动画表单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现jQuery动画表单
EN