無線タイプの選択に基づいてdiv要素をトグルするには?
-
21-08-2019 - |
質問
私はこのようなものを使用してdiv要素を切り替える -
<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;
}
}
);
これは正常に動作します。私の質問は、私はそれを改善し、私は、スイッチのすべてのケースを変更する必要がMORE 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();
});
...
を使用する前に私はあなたが多分.panel、折りたたみ式のパネルのそれぞれにクラスを追加示唆しています。そしてだけdiv.panelの代わりに、ページ上のすべてのdivを変更するセレクタを更新します。
あなたのソリューションは、実際には逆の行動を持って8-- IEでは動作しません。代わりに「変更」
の「クリック」機能を使用します $('.myDiv').hide();
$('input[name="myRadio"]').click(function(){
var selected = $(this).val();
$('.myDiv').slideUp();
$('#'+selected).slideDown();
});
所属していません StackOverflow