javascript - 隐藏选中不同比例的不同div

Question

Got this code in the following question 你好! 我怎样才能将此代码转换为“通用”。目前它只适用于一种情况。如果我有两个，它将不起作用。

谢谢

$(document).ready(function() {
   $('input[type="radio"]').click(function() {
       if($(this).attr('id') == 'watch-me') {
            $('#show-me').show();           
       }
       else {
            $('#show-me').hide();   
       }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="medium-12">
  <label>Are you a member?</label>
</div>
<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div id="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

Answer 1

你必须设置一个通用的 class 并针对选定的单选按钮进行 dom 遍历。

---

注意事项:

1. 对单选按钮使用更改事件而不是点击事件。
2. 使用值来检测单选按钮而不是嗅探它的 id。

$(document).ready(function() {
   $('input[type="radio"]').change(function() {
      $(this).closest('fieldset').find('.show-me').toggle(this.value == "yes");           
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="medium-12">
  <label>Are you a member?</label>
</div>
<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

<div class="medium-6">
  <fieldset class="form-row" id="Member">
    <input type="radio" id="watch-me"  value="yes" name="Member" class="tap-input">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>

    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber">Please enter your Membership number</label>
        <input id="memberNumber" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>