为什么选择div无法正常工作？

以下是我的代码，我试图显示div内的所有元素。但是我以一个意想不到的结果登陆了。为什么选择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 ID作为第二步没有按即使存在，它仍然会让我输出第2步。由于我对这个新手，我无法弄清楚我做错了什么。如果程序遵循正确与否，有人可以指导我吗？这里我的错误是什么？您的输入将是一个很大的帮助。在此先感谢。

来源

2017-09-03 Devanshi

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

第二步each与第二步相同。

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

那么试试这个来代替：

$(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')); 

     }); 
    }); 
});

来源

2017-09-03 07:04:19

它的工作原理（Y），谢谢:) – Devanshi

这是男人的事做好 –

我看到你尝试打印一个名为第二步：使用JavaScript，你需要注释掉名称的属性，或者您需要删除这个特定的代码来获得摆脱那。

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

来源

2017-09-03 07:11:21 Varma

取而代之的是使用div，我建议在表单里面做。

$(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')); 
 
     }); 
 
    }); 
 
});

<!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>

来源

2017-09-03 07:19:06

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

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

来源

2017-09-03 08:39:56

为什么选择div无法正常工作？

回答

相关问题