如何使用jQuery显示正确的子“div”？

Question

你能帮我解决这个问题， 我有两个依赖的下拉列表，根据用户输入隐藏和显示div。

Div 1工作正常，但每次用户选择Div 2时，Div 1都会受到影响。

$(document).ready(function() {
  $('#YES').hide();
  $('#yestip').hide(5);
  $("#select5").change(function() {
    $('#YES')[this.value > 1 ? 'show' : 'hide']('slow');
  });

  $("#tip").change(function() {
    $('#yestip').hide('slow');
    $("#" + this.value).show('slow');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
No. of sites:
<select name="sites" id="select5" required="yes">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

<div id="YES">
  Name:
  <input type="text">
</div>

<br>
<br>Yes or No:
<select id="tip" name="tip_scrub">
  <option value='NO'>NO</option>
  <option value='YES'>YES</option>
</select>

<div id="yestip">
  Total:
  <input type="text">
</div>

Answer 1

试试这个：

$(document).ready(function () {
    $('#YES').hide();
    $('#yestip').hide(5);
    $("#select5").change(function () {
        $('#YES')[this.value > 1 ? 'show' : 'hide']('slow');
    });

    $("#tip").change(function(){
        $('#yestip')[this.value == 'YES' ? 'show' : 'hide']('slow');
    });
});