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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>