選択したラジオに応じて、さまざまなdivを非表示にして表示しようとしています。残念ながら、私はこれまでのところ実用的な解決策を思い付くことができませんでした。これが私の開始コードですhttp://jsbin.com/edokef/1/edit
多分誰かがそれを達成する方法を提案することができますか?各無線のインデックスを取得することを考えていましたが、各無線は個別のdivラップ内にあり、その場合、インデックスは常に0です。
アイデアありがとうございます。
選択したラジオに応じて、さまざまなdivを非表示にして表示しようとしています。残念ながら、私はこれまでのところ実用的な解決策を思い付くことができませんでした。これが私の開始コードですhttp://jsbin.com/edokef/1/edit
多分誰かがそれを達成する方法を提案することができますか?各無線のインデックスを取得することを考えていましたが、各無線は個別のdivラップ内にあり、その場合、インデックスは常に0です。
アイデアありがとうございます。
デモ: http: //jsbin.com/edokef/7/edit
コード:
options.click(function(){
var id = "opt" + $(this).val();
$(".optDivs").hide();
$("#" + id).show();
});
さらに、表示されるはずの各divにクラスがあります(optDivs
)
完全な解決策を提供しなかったことをお詫びします。
1)なぜインデックスを使用したいのですか?すべてのラジオには価値があります。代わりにそれを使用してください。
2)「選択したラジオに応じて異なるdivを表示および非表示にする」ことは、少なくとも1対多の関係のように聞こえます。このタスクにはパブリッシャー/サブスクライバーを使用することをお勧めします。このパターンには多くの使用可能な実装があります。https://github.com/federico-lox/pubsub.js
PS jQueryに基づくpubsubの実装は避けてください(DOMを操作し、少し遅いです)
これはあなたを助けることができるかもしれません
$(function(){
(function(){
var options = $('#options').find('input');
options.click(function(){
if($(this).is(':checked'))
{
$('#' + $(this).parent().attr('class')).show();
}
else
{
$('#' + $(this).parent().attr('class')).hide();
}
});
})();
});
これは機能します:
<script>
$(function(){
(function(){
var options = $('#options').find('input');
$(options).click(function(){
$('#opt1, #opt2, #opt3').hide();
$('#' + $(this).parent().attr('class')).show();
});
})();
});
</script>