爲什麼選擇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無法正常工作？

回答

相關問題