2

これは私のHTMLコードです

<div class="wrapper"> <strong>Space portion</strong>

<br />
<input type="radio" name="rdSpace" value="RJ" />Space 1
<br />
<input type="radio" name="rdSpace" value="SM" />Space 2
<br />
<br />
</div>
<div class="wrapper"> <strong> Template</strong>

<br />
<input type="radio" name="rdTemplate" value="uploadTemplate" />Upload your own file
<label class="cabinet">
    <input style="margin-left:10px;" type="file" name="user_upload_template"
    class="uploader" id="file">
    <br />
    <input type="radio" name="rdTemplate" value="preExisting" />Choose below
    <div id="RJ" class="tempDisp">Div 1 Preview</div>
    <div id="SM" class="tempDisp">Div 2 Preview</div>

これはjqueryコードです

$(document).ready(function () {
$("div.tempDisp").hide();
$('[id="' + $(":radio:checked").val() + '"]').show();
$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
    $("div.tempDisp").fadeOut('slow');
    $('[id="' + $(this).val() + '"]').fadeIn('slow');
});
});

jqueryコードの目的は、「Space1」ラジオの選択時に「Div1 Preview」を表示し、「Space2」ラジオの選択時に「Div2Preview」を表示することです。これまでは正常に機能しています。

今、私は「自分のファイルをアップロードする」ラジオの選択で「Div1プレビュー」と「Div2プレビュー」を非表示にする機能を追加しようとしました。成功し、上記のボタンを選択すると、それらは非表示になります。 「下から選択」ラジオをクリックしても表示されないのはなぜですか？

これがフィドルです http://jsfiddle.net/bTM66/

4

3 に答える 3

3

これを試して：

$(document).ready(function () {
    $("div.tempDisp").hide();
    $('[id="' + $(":radio:checked").val() + '"]').show();
    $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').change(function () {
        $("div.tempDisp").fadeOut('slow');
        if ($(this).val() === "preExisting") {
            $(":radio:checked:first").change();
        } else {
            if(!$('input[value="uploadTemplate"]').is(':checked')){
            $('[id="' + $(this).val() + '"]').fadeIn('slow');
          }
        }
    });
});

サンプルフィドルを見る

于 2013-03-06T10:37:08.047 に答える
2

したがって、2つの別々の値に応じて、2つのdivのいずれかを表示するかどうかを確認します。

クリックイベントは両方のラジオボタンのセットにバインドされているため$(this)、チェックされたものの値を取得して表示するIDを選択することはできません。名前で、どのラジオボタンの選択からのものかを指定する必要があります。

また、他の選択（ブラウザ/ピック）のどれがチェックされているかをチェックして、表示するかしないかを確認する必要があります。

また、クリックする代わりに変更時に使用して、不要なフェードアウト/フェードインが発生しないようにします。

そして、私はstyle="display:none"divs .tempDispに追加して、jsなしでロード時にすでに非表示になっているようにします。

作業中のjsfiddle

$(document).ready(function () {

    $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').on('change', function () {
        $("div.tempDisp").fadeOut('slow');
        if ($('input[name="rdTemplate"]:checked').val()=='preExisting'){
            $('[id="' + $('input[name="rdSpace"]:checked').val() + '"]').fadeIn('slow');
        }
    })
});

これをチェックに設定すると、最初の選択を変更したユーザーが表示を決定できるようになります。

<input type="radio" name="rdTemplate" value="preExisting" checked="checked" />
于 2013-03-06T10:33:59.193 に答える
2

あなたのコードが何をしているのか..

$('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {== クリックすると、指定されたセレクターのラジオで

$("div.tempDisp").fadeOut('slow');== クラス tempDisp の div フェードアウトが遅い

$('[id="' + $(this).val() + '"]').fadeIn('slow');== id を持つ div (選択されたラジオ val) を表示

問題

クリックUpload your own fileすると、現在の値はuploadTemplateになり、jquery は で div を見つけることができなくなりますid = uploadTemplate。だから何も起こらない。

onclick Choose below同じこと..現在の値はpreExisting、また div で見つかりませんid=preExisting。だからまた何も起こらない

回避策 

 $(document).ready(function () {
   $("div.tempDisp").hide();
   $('[id="' + $(":radio:checked").val() + '"]').show();
   $('input[name="rdSpace"]:radio,input[name="rdTemplate"]').click(function () {
      $("div.tempDisp").fadeOut('slow');
      $('[id="' + $(this).val() + '"]').fadeIn('slow');
      if($(this).val()=="preExisting"){ //here check if value is preExistig
         $('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');
         //$('#RJ,#SM').fadeIn('slow');  //if yes show the div you wanted which is RJ,SM
      }
   });
});

アップデート

交換

  $('#RJ,#SM').fadeIn('slow');

と

 $('#'+ $('input[name="rdSpace"]:checked').val()).fadeIn('slow');

更新された作業フィドル

于 2013-03-06T10:35:21.847 に答える