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

Question

Got this code in the following question 你好！如何将此代码转换为 "universal"。目前它只适用于一种情况。如果我有两个就不行了。

谢谢

$(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 遍历。

注意事项：

对单选按钮使用更改事件而不是单击事件。
使用该值来检测单选按钮而不是嗅探其 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>

Answer 2

If i have two it will not work.

为什么？ :: 因为如果你只是 copy/paste 相同的结构两次你将有重复的 ID，这是无效的，使你的 JS 代码无用。

您需要的是一个基于类名或 attr 的结构，如下所示：

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

.show-me {
  display:none;
}

<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-me2"  value="yes" name="Member2" class="tap-input">
    <label for="watch-me2">Yes</label>
    <input type="radio" id="MemberNo2" value="no" name="Member2" class="tap-input">
    <label for="MemberNo2">No</label>
    <div class="show-me" class=" medium-12">
      <div class="form-row">
        <label for="memberNumber2">Please enter your Membership number</label>
        <input id="memberNumber2" name="memberNumber" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

Answer 3

对于不同的值，你可以这样做。

function showHide(input){
  var attrVal = $(input).attr('id');
     switch (attrVal) {
         case 'watch-me':
         $('#show-me-2').hide();   
         $('#show-me').show();     
         break;
         case "watch-me-maybe":
         $('#show-me').hide();  
          $('#show-me-2').show();   
          break;
       default :
         $('#show-me-2').hide();  
         $('#show-me').hide();  
          break;
         }
}
$(document).ready(function() {
  $('input[type="radio"]').each(function(){
      showHide(this); 
  });
   $('input[type="radio"]').click(function() {
     showHide(this);
   });
});

<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" checked="checked">
    <label for="watch-me">Yes</label>
    <input type="radio" id="MemberNo" value="no" name="Member" class="tap-input">
    <label for="MemberNo">No</label>
    <input type="radio" id="watch-me-maybe" value="maybe" name="Member" class="tap-input">
    <label for="MemberMaybe">Maybe</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>
    <div id="show-me-2" class="medium-12">
      <div class="form-row">
        <label for="memberNumber2">Please enter your Membership number2</label>
        <input id="memberNumber2" name="memberNumber2" class="inputfield" type="text">
      </div>
    </div>
  </fieldset>
</div>

Answer 4

我试图在不考虑任何 class 或 id 的情况下完成这项工作，仅考虑 html 结构。

看这里jsfiddle

从不使用重复的 ID！不要将相同的 ID 放在 2 个或更多不同的元素上，请使用类而不是
使用 attr('value') 代替 attr('id')

JQ :

$("fieldset").each(function(){
 var showme = $(this).children("div"),
     radio = $(this).children('input[type="radio"]')
 $(radio).change(function() {
   if($(this).attr('value') == 'yes') {
        $(showme).show();           
   }
   else {
        $(showme).hide();   
   }
 });
});

如果有帮助请告诉我

Answer 5

为您准备的较短版本。它使用附加到文档的委托事件（它始终存在，因此不需要 DOM 就绪处理程序）。相对较慢的过滤器表达式（:radio）在事件时间（无关紧要时）只有运行：

$(document).on('change', ':radio', 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>

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

Hide different divs with different ratio checked

html

javascript

jquery

hide

checked