Question

以下是我的代码，我试图显示div中的所有元素。但是我得到了一个意想不到的输出。

的index.php： -

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="jspage.js"></script>
    </head>
    <body>
        <div class="tab-pane fade in active" id="step1">
            <fieldset>
                <legend><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;Personal Details</legend>
                <div class="form-inline">
                    &nbsp;&nbsp;&nbsp;
                    <label for="stutitle">Title</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <select id=" Title" name="Title" class="imp form-control" >
                        <option value="">Please select...</option>
                        <option value="Mr">Mr</option>
                        <option value="Miss">Miss</option>
                   </select>
                    &nbsp;&nbsp;&nbsp;
                    <label for="stufname">Firstname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id=" Firstname"  name="First Name" placeholder="First name" class="imp form-control" >
                    &nbsp;&nbsp;&nbsp;  
                    <label for="stusname">Surname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id=" Surname" name="Surname" placeholder="Surname" class="imp form-control" >
                    <br><br>
                </div>
            </fieldset>
        </div>
        <input type="submit" value="submit" name="app_submit" />
    </body>
</html>

jspage.js： -

$(document).ready(function () {

    $('input[name="app_submit"]').click(function () {
        $('div[id="step1"] input,select').each(function () {
            console.log("Step1: "+$(this).attr('name'));

        });
        $('div[id="step2"] input,select').each(function () {
            console.log("Step2: "+$(this).attr('name'));

        });
    });
});

这里我得到以下输出：

Step1: Title
Step1: First Name
Step1: Surname
Step2: Title

div作为Step2的ID甚至不存在它仍然给我输出第2步。因为我是新手，我无法弄清楚我做错了什么。如果遵循的程序是否正确，有人可以指导我吗？我的错误在这里是什么？您的意见将是一个很大的帮助。提前谢谢。

Answer 1

您使用的选择器正在查找文档中input AND 所有div[id="step1"]的所有select。

第二个each与step2相同。

你必须具体......使用的昏迷允许第二个选择器。但它被认为是另一个全新的选择器，而不是＆＃34;变体＆＃34;第一个。

所以试试这个：

$(document).ready(function () {

    $('input[name="app_submit"]').click(function () {
        $('div[id="step1"] input, div[id="step1"] select').each(function () {
            console.log("Step1: "+$(this).attr('name'));

        });
        $('div[id="step2"] input, div[id="step2"] select').each(function () {
            console.log("Step2: "+$(this).attr('name'));

        });
    });
});

Answer 2

我看到你试图使用javascript打印名为step2的属性，你需要注释掉，或者你需要删除这个特定的代码来摆脱它。

// $('div[id="step2"] input,select').each(function () {
//     console.log("Step2: "+$(this).attr('name'));
// });

Answer 3

我没有使用div，而是建议将其放在表单中。

＆＃13;

$(document).ready(function () {
    $('#step1').submit(function(e){
        e.preventDefault(); //** prevent normal form submission and page reload

        $('#step1 input,select').each(function () {
            console.log("Step1: "+$(this).attr('name'));
        });
    });
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="jspage.js"></script>
</head>
<body>
    <form method="POST" id="step1">
        <div class="tab-pane fade in active">
            <fieldset>
                <legend><i class="fa fa-id-card" aria-hidden="true"></i>&nbsp;Personal Details</legend>
                <div class="form-inline">
                    &nbsp;&nbsp;&nbsp;

                    <label for="stutitle">Title</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <select id="Title" name="Title" class="imp form-control" >
                        <option value="">Please select...</option>
                        <option value="Mr">Mr</option>
                        <option value="Miss">Miss</option>
                   </select>
                    &nbsp;&nbsp;&nbsp;

                    <label for="stufname">Firstname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id="Firstname"  name="First Name" placeholder="First name" class="imp form-control" >
                    &nbsp;&nbsp;&nbsp;  

                    <label for="stusname">Surname</label>
                    <span style="color: red; font-weight:bold;"><big>*</big></span>
                    <input id="Surname" name="Surname" placeholder="Surname" class="imp form-control" >
                    <br><br>
                </div>
            </fieldset>
        </div>
        <input type="submit" value="submit" name="app_submit" />
    </form>
</body>
</html>

＆＃13;

Answer 4

您的选择器语法是实际问题。您在选择之前使用逗号。而不是使用 $('div[id="step1"] input,select')

你必须使用 $('div[id="step1"] input, div[id="step1"] select')

为什么选择div不能正常工作？

4 个答案: