Question

我试图创建一个函数，以便通过调用以下函数来执行html代码。我需要做些什么来将其翻译为公认的功能？

 function jquery_register(){

    }

这是必需的HTML代码

<div id="container">
        <form action="#" method="post">

            <!-- #first_step -->
            <div id="first_step">
                <h1>SIGN UP FOR A FREE <span>Reg Name</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="username" id="username" value="username" />
                    <label for="username">At least 4 characters. Uppercase letters, lowercase letters and numbers only.</label>

                    <input type="password" name="password" id="password" value="password" />
                    <label for="password">At least 4 characters. Use a mix of upper and lowercase for a strong password.</label>

                    <input type="password" name="cpassword" id="cpassword" value="password" />
                    <label for="cpassword">If your passwords aren’t equal, you won’t be able to continue with signup.</label>
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_first" id="submit_first" value="" />
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #second_step -->
            <div id="second_step">
                <h1>SIGN UP FOR A FREE <span>Reg Name</span> ACCOUNT</h1>

                <div class="form">
                    <input type="text" name="firstname" id="firstname" value="first name" />
                    <label for="firstname">Your First Name. </label>
                    <input type="text" name="lastname" id="lastname" value="last name" />
                    <label for="lastname">Your Last Name. </label>
                    <input type="text" name="email" id="email" value="email address" />
                    <label for="email">Your email address. We send important administration notices to this address. </label>                    
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_second" id="submit_second" value="" />
            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #third_step -->
            <div id="third_step">
                <h1>SIGN UP FOR A FREE <span>Reg Name</span> ACCOUNT</h1>

                <div class="form">
                    <select id="age" name="age">
                        <option> 0 - 17</option>
                        <option>18 - 25</option>
                        <option>26 - 40</option>
                        <option>40+</option>
                    </select>
                    <label for="age">Your age range. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                    <select id="gender" name="gender">
                        <option>Male</option>
                        <option>Female</option>
                    </select>
                    <label for="gender">Your Gender. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                    <select id="country" name="country">
                        <option>United States</option>
                        <option>United Kingdom</option>
                        <option>Canada</option>
                        <option>Serbia</option>
                        <option>Italy</option>
                    </select>
                    <label for="country">Your country. </label> <!-- clearfix --><div class="clear"></div><!-- /clearfix -->

                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="submit" type="submit" name="submit_third" id="submit_third" value="" />

            </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->


            <!-- #fourth_step -->
            <div id="fourth_step">
                <h1>SIGN UP FOR A FREE <span>Reg Name</span> ACCOUNT</h1>

                <div class="form">
                    <h2>Summary</h2>

                    <table>
                        <tr><td>Username</td><td></td></tr>
                        <tr><td>Password</td><td></td></tr>
                        <tr><td>Email</td><td></td></tr>
                        <tr><td>Name</td><td></td></tr>
                        <tr><td>Age</td><td></td></tr>
                        <tr><td>Gender</td><td></td></tr>
                        <tr><td>Country</td><td></td></tr>
                    </table>
                </div>      <!-- clearfix --><div class="clear"></div><!-- /clearfix -->
                <input class="send submit" type="submit" name="submit_fourth" id="submit_fourth" value="" />            
            </div>

        </form>
    </div>
    <div id="progress_bar">
        <div id="progress"></div>
        <div id="progress_text">0% Complete</div>
    </div>

在调用函数之后，就像我说的那样，它将在该函数的页面上执行并显示表单。

我有已经存在的jquery函数。

我需要做的就是完成这段代码。

Answer 1

您有几种不同的方法可以做到这一点：

1-在服务器端创建一个html文件，将你的html放在上面，并使用jQuery load函数：

function jquery_register(){
    jQuery(document.body).load(html_file_url);
}

2-创建html文件，就像第一个解决方案一样，使用jQuery ajax加载并将其注入页面：

function jquery_register(){
    jQuery.get(html_file_url).then(function(htmlstr, status){
        if(status == "success"){
            jQuery(document.body).html(htmlstr);
        }
    });
}

3-另一种方法是在客户端定义一个变量，并执行以下操作：

function jquery_register(){
    var html_variable = '<div id="container">.....the rest';
    jQuery(document.body).html(html_variable);
}

4-或者您可以这样做：

document.body.innerHTML = html_variable;

或在页面中创建一个容器：

document.getElementById("htmlcontainer").innerHTML = html_variable;

HTML注册所需的功能

1 个答案: