كيف للتبديل شعبة بناء على اختيار نوع الراديو؟
-
21-08-2019 - |
سؤال
وأنا تبديل لشعبة باستخدام شيء من هذا القبيل -
<input type="radio" name="myRadio" value="myDiv_1" />MyDiv
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3
<div id="myDiv_1"> 1 Some input fields, text </div>
<div id="myDiv_2"> 2 More input fields, text </div>
<div id="myDiv_3"> 3 More input fields, text </div>
JAVASCRIPT
$('#myDiv_1').hide();
$('#myDiv_2').hide();
$('#myDiv_3').hide();
$('input[name="myRadio"]').change(function() {
var selected_type = $(this).val();
switch(selected_type) {
case "myDiv_1":
$('#myDiv_1').slideDown();
//if others are visible just slideup
$('#myDiv_2').slideUp();
$('#myDiv_3').slideUp();
break;
case "myDiv_2":
$('#myDiv_2').slideDown();
//if others are visible just slideup
$('#myDiv_1').slideUp();
$('#myDiv_3').slideUp();
break;
case "myDiv_3":
$('#myDiv_3').slideDown();
//if others are visible just slideup
$('#myDiv_2').slideUp();
$('#myDiv_1').slideUp();
break;
}
}
);
وهذا يعمل بشكل جيد. سؤالي هو: كيف يمكنني تحسين وجعلها أكثر مرونة وكأن لا بد لي من عناصر div أخرى لا بد لي من تعديل جميع حالات التبديل.
وأيضا يجب أن أرفق وظيفة التبديل في وظيفة وربط هذه الوظيفة لأحداث مثل نقرة والتغيير (فقط للتأكد من أن أعمال تبديل)؟
وشكرا لمساعدتكم.
المحلول
وهذا يعمل، لقد اختبرت ذلك.
<script type="text/javascript">
$(document).ready(function(){
$('.MyDiv').hide();
$('input[name="myRadio"]').change(function(){
var selected = $(this).val();
$('.MyDiv').slideUp();
$('#'+selected).slideDown();
});
});
</script>
ويجب على أزرار تبدو هذه، حيث value
هو id
من العناصر التي ينبغي أن تظهر.
<form action="example.com" method="post">
<input type="radio" name="myRadio" value="myDiv_1" />MyDiv<br />
<input type="radio" name="myRadio" value="myDiv_2" />MyDiv2<br />
<input type="radio" name="myRadio" value="myDiv_3" />MyDiv3<br />
<input type="radio" name="myRadio" value="myDiv_4" />MyDiv4
</form>
وأخيرا، ينبغي أن div
s تبدو هذه، عن وجود MyDiv
الدرجة:
<div id="myDiv_1" class="MyDiv">Div number 1!</div>
<div id="myDiv_2" class="MyDiv">Div number 2!</div>
<div id="myDiv_3" class="MyDiv">Div number 3!</div>
<div id="myDiv_4" class="myDiv">Div number 4!</div>
نصائح أخرى
وويستند على الكود الذي تم لصقه هنا التالية - قبل استخدام، وقراءة أدناه:
$("div").hide();
$("input[name='myRadio']").change(function(){
$("div:not(#"+$(this).val()+")").slideUp();
$("div#"+$(this).val()).slideDown();
});
قبل عن طريق ...
وأود أن أقترح عليك إضافة فئة إلى كل من لوحات القابل للطي، ربما. لوحة. ثم قم بتحديث محددات لتعديل div.panel فقط بدلا من كل شعبة على الصفحة.
والحل لا يعمل في IE 8-- في الواقع عكس ذلك السلوك. استخدام وظيفة "فوق" بدلا من "التغيير"
$('.myDiv').hide();
$('input[name="myRadio"]').click(function(){
var selected = $(this).val();
$('.myDiv').slideUp();
$('#'+selected).slideDown();
});