新手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>