隐藏不同检查比例的不同divs

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>

Answer 2

如果我有两个将无法正常工作。

为什么？ ::因为如果你只是复制/粘贴相同的结构两次，你将有重复的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

1. 从未使用重复的ID！不要把相同的ID在2个或更多不同的元素，使用类，而不是

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就绪处理程序）。在这个意义上

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