隱藏不同檢查比例的不同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>