jQueryのラジオボタンを使用してdiv可視性を切り替えるには？

$(':radio').change(function(event) { 
 
    var id = $(this).data('id'); 
 
    $('#' + id).addClass('none').siblings().removeClass('none'); 
 
});

.none { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<input type="radio" name='thing' value='valuable' data-id="bank" /> 
 
<input type="radio" name='thing' value='valuable' data-id="school" /> 
 
<hr /> 
 
<div id="bank" class="none">Bank</div> 
 
<div id="school" class="none">School</div>

私は、ラジオボタンを使用してdiv要素を表示し、非表示にしたいが、このコードは私のために動作しません。私はここで、スタックでこのコードを得ました。 jfiddleではうまく見えますが、私が使ったときはうまくいきません。

出典

2017-09-21 Jeric Javier

あなたのJSコードを '$（function（）{//あなたの既存のコード}）のようにDOMに入れてください;'うまくいくでしょう。 –

ありがとう、仲間に感謝します。私はあなたに抱擁を与えることができますxD私は小切手を意味する –

このようなdocument.readyの内側にあなたのjqueryのコードを入れてください：

<script src="js/jquery-3.1.1.js"></script> 
<script> 
    $(document).ready(function(){ 
     $(':radio').change(function (event) { 
      var id = $(this).data('id'); 
      $('#' + id).addClass('none').siblings().removeClass('none'); 
     }); 
    }); 
</script>

出典

2017-09-21 05:01:49

を<body>タグの下にあるスクリプトタグを入れるか、あなたはDocument Readyメソッドを使用する必要がdefer

出典

2017-09-21 05:02:33 Dane

を使用しています。

ドキュメントが「準備完了」になるまでページを安全に操作することはできません。 jQueryはこの状態を検出します。 $（document）.ready（）の中に含まれるコードは、JavaScriptコードを実行する準備ができているページDOM（Document Object Model）に一度しか実行されません。

<script> 
$(document).ready(function(){ 
    $(':radio').change(function (event) { 
    var id = $(this).data('id'); 
    $('#' + id).addClass('none').siblings().removeClass('none'); 
    }); 
}); 
</script>

出典

2017-09-21 05:06:15

ことは、これを試してみてください：それは働いた場合

.none { 
 
display:none; 
 
}

<html> 
 
<head> 
 
<title> 
 
</title> 
 
</head> 
 
<body> 
 
    <input type="radio" name='thing' value='valuable' data-id="bank" /> 
 
    <input type="radio" name='thing' value='valuable' data-id="school" /> 
 
    <hr /> 
 
    <div id="bank" class="none">Bank</div> 
 
    <div id="school" class="none">School</div> 
 
     
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
    $(':radio').change(function (event) { 
 
     var id = $(this).data('id'); 
 
     $('#' + id).addClass('none').siblings().removeClass('none'); 
 
    }); 
 
    }); 
 
</script> 
 
</body> 
 
</html>

出典

2017-09-21 05:07:21 Jonjie

はこれを試してみてください、なぜ、私が説明します

$(document).ready(function(){ 
 
    $('input:radio').click(function (event) { 
 
     var id = $(this).data('id'); 
 
     $('#' + id).addClass('none').siblings().removeClass('none'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
.none { 
 
display:none; 
 
} 
 
</style> 
 
<input type="radio" name='thing' value='valuable' data-id="bank" /> 
 
<input type="radio" name='thing' value='valuable' data-id="school" /> 
 
<hr /> 
 
<div id="bank" class="none">Bank</div> 
 
<div id="school" class="none">School</div>

出典

2017-09-21 05:15:09

jQueryのラジオボタンを使用してdiv可視性を切り替えるには？

答えて

関連する問題