使用jquery隱藏所有具有類的元素

Question

我是JavaScript新手，非常喜歡它，但是現在我面臨着一個讓我感到困惑的問題。

我寫了下面的代碼來隱藏類male的所有元素，但它不起作用。當我用id替換類male時，代碼開始工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form class="form-register" method="post" action=""> 
 

 
      <div class="form-title-row"> 
 
       <h1>Create an account</h1> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <label> 
 
        <span>Gender</span> 
 
        <select name="register_as" id="dropdown"> 
 
         <option value="none">Select One</option> 
 
         <option value="male">Male</option> 
 
         <option value="female">Female</option> 
 
        </select> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row" class="male"> 
 
       <label> 
 
        <span>First Name</span> 
 
        <input type="text" name="firstname"> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row" class="male"> 
 
       <label> 
 
        <span>Last Name</span> 
 
        <input type="text" name="lastname"> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <label> 
 
        <span>Email</span> 
 
        <input type="email" name="email"> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <button type="submit">Register</button> 
 
      </div> 
 

 
    <script> 
 
     $(document).ready(function(){ 
 
      $(".male").hide(); 
 
      $("#dropdown").change(function(){ 
 
       if ($("#dropdown").val() == "male") { 
 
        $(".male").show(); 
 
       } else { 
 
        $(".male").hide(); 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
</form>

我真的不知道該如何解決這個問題。請幫助我。

Answer 1

那是因爲你有一個元素意味着雙class屬性只有第一個class將生效和leadin克至與類沒有元素.male

你可以列出同一class屬性內部使用空間多類：

<div class="form-row male"> 

---

優化JS代碼

您可以使用.toggle(true/false)分辨元素必須隱藏或顯示。

此外，我建議添加css爲.male：.male {display: none;}，以防止在JS仍處理時顯示元素。

$(document).ready(function(){ 
    $(".male").hide(); 

    $("#dropdown").change(function(){ 
     $(".male").toggle($("#dropdown").val() == "male"); 
    }); 
}); 

Answer 2

你不能在你的HTML 2個class屬性的方式來設置多個class是與每個class之間的空間相同的屬性。

更改您這樣的代碼：

class="form-row male" 

那麼它應該工作。

Answer 3

嘗試更改爲這樣：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form class="form-register" method="post" action=""> 
 

 
      <div class="form-title-row"> 
 
       <h1>Create an account</h1> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <label> 
 
        <span>Gender</span> 
 
        <select name="register_as" id="dropdown"> 
 
         <option value="none">Select One</option> 
 
         <option value="male">Male</option> 
 
         <option value="female">Female</option> 
 
        </select> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row male"> 
 
       <label> 
 
        <span>First Name</span> 
 
        <input type="text" name="firstname"> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row male"> 
 
       <label> 
 
        <span>Last Name</span> 
 
        <input type="text" name="lastname"> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <label> 
 
        <span>Email</span> 
 
        <input type="email" name="email"> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <button type="submit">Register</button> 
 
      </div> 
 

 
    <script> 
 
     $(document).ready(function(){ 
 
      $(".male").hide(); 
 
      $("#dropdown").change(function(){ 
 
       if ($("#dropdown").val() == "male") { 
 
        $(".male").show(); 
 
       } else { 
 
        $(".male").hide(); 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
</form>

我所做的是改變這一點： <div class="form-row" class="male"> 這個 <div class="form-row male">

Answer 4

類= 「形式排」 類= 「男性」

應與

類= 「形式排男性」

Answer 5

被替換

原因是您具有相同的屬性，即class多次在同一元素上聲明。

爲單個元素（無效的HTML）聲明多次相同的屬性，將讓第一個值覆蓋同一屬性的所有後續值。

在這種情況下

所以，你的元素必須只有一個class屬性

這種行爲在此說明Attribute-name-state

<div class="form-row male">

JSFIDDLE