新手jQuery切換/隱藏/顯示按鈕點擊

Question

我想寫一個函數使用jQuery，但我的jQuery並不擅長。當頁面加載時，應該有兩個字段Min Apt Price和Max Apt Price。當我點擊一個按鈕時，那些最初的字段需要隱藏，我需要Min Bed Price和Max Bed Price來顯示。我已經到了頁面加載Min Apt Price和Max Apt Price將顯示並且其他兩個隱藏的點。當我點擊按鈕Min Bed Price和Max Bed Price將顯示，但旁邊的原始字段。希望這是有道理的。

HTML：

$(document).ready(function() { 
 
     $('.room-price').hide(); 
 
     $('#price-switch').click(function() { 
 
     $('.room-price').toggle(); 
 
     $('.apt-price').hide(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="price-switch">Switch</button> 
 
    <div class="row"> 
 
     <div id="apt-price"> 
 
     <div class="col-sm-2 min-max-price"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price"> 
 
      </div> 
 
     </div> 
 
     <br class="visible-xs"> 
 
     <div class="col-sm-2"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="room-price"> 
 
     <div class="col-sm-2 min-max-price"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price"> 
 
      </div> 
 
     </div> 
 
     <br class="visible-xs"> 
 
     <div class="col-sm-2"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

Answer 1

你有apt-price作爲ID，不是一類，因此，如果你想只需撥動他們，你會做

$(document).ready(function() { 
 
    $('.room-price').hide(); 
 
    
 
    $('#price-switch').click(function() { 
 
     $('.room-price, #apt-price').toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="price-switch">Switch</button> 
 
<div class="row"> 
 
    <div id="apt-price"> 
 
     <div class="col-sm-2 min-max-price"> 
 
      <div class="input-group"> 
 
       <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price"> 
 
      </div> 
 
     </div> 
 
     <br class="visible-xs"> 
 
     <div class="col-sm-2"> 
 
      <div class="input-group"> 
 
       <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="room-price"> 
 
     <div class="col-sm-2 min-max-price"> 
 
      <div class="input-group"> 
 
       <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price"> 
 
      </div> 
 
     </div> 
 
     <br class="visible-xs"> 
 
     <div class="col-sm-2"> 
 
      <div class="input-group"> 
 
       <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

其Id=apr-price不是類，所以與$('#apt-price')。適用既適用於單肘其足以切換

$(document).ready(function() { 
 
     $('.room-price').hide(); 
 
     $('#price-switch').click(function() { 
 
     $('.room-price ,#apt-price').toggle(); 
 
    
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="price-switch">Switch</button> 
 
    <div class="row"> 
 
     <div id="apt-price"> 
 
     <div class="col-sm-2 min-max-price"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Min Apt Price" id="minimum-price"> 
 
      </div> 
 
     </div> 
 
     <br class="visible-xs"> 
 
     <div class="col-sm-2"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Max Apt Price" id="maximum-price"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="room-price"> 
 
     <div class="col-sm-2 min-max-price"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Min Bed Price" id="min-room-price"> 
 
      </div> 
 
     </div> 
 
     <br class="visible-xs"> 
 
     <div class="col-sm-2"> 
 
      <div class="input-group"> 
 
      <input type="text" class="general-text-field" placeholder="Max Bed Price" id="max-room-price"> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>