ラジオボタンが選択されたときにelemenを表示/非表示にし、要素を動的に追加します。

Question

javascriptとjqueryに関するいくつかの問題があります。これは私のコードをブラウザで見ることです。

• 私は "新しい質問" を選択した場合<div class="new">が示すと<div class="existing">非表示にされて表示させたいです。 「既存の質問は、」選択した場合はその後、それは「質問を追加」は「+答え」

をクリックした場合、私は<div class="answer">を複製する

をクリックした場合、私は<div class="question">を複製する<div class="existing">を示し、<div class="new">

を非表示になりますここに私のHTMLです

<div id="questions"> 
     <h2>Questions</h2> 
     <hr> 
     <div class="question"> 
      <div class="radio"> 
       <label><input type="radio" name="quest" value="new"> New Question 
       </label> &nbsp; 
       <label><input type="radio" name="quest" value="existing"> Existing Question 
       </label></div> 
      <div class="new"> 
       <div class="form-group"> 
        <label for="descripton">Description</label> 
        <input class="form-control" type="text" name="question[description][]" 
          placeholder="Enter question description"> 
       </div> 
       <div id="answers"> 
        <button class="btn btn-flat" id="addanswer"><i class="fa fa-plus-circle"></i> 
         Answer 
        </button> 
        <div class="answer form-group"> 
         <label for="answer">Answer</label> 
         <input type="text" class="form-control" name="question[answer][]"> 
        </div> 
       </div> 
      </div> 
      <div class="existing"> 
       <select name="question"> 
        <option value="A">AAA</option> 
        <option value="B">BBB</option> 
        <option value="C">CCC</option> 
        <option value="D">DDD</option> 
        <option value="E">EEE</option> 
       </select> 
      </div> 
     </div> 
    </div> 

誰かが私の場合のjavascript/jqueryコードの考え方を持っていますか？あなたのコードだ

Answer 1

ありがとう：jqueryのコードの下

$('input[type="radio"]').click(function(){ 
 
\t var value=$(this).val(); 
 
    if(value=='new'){ 
 
    \t $('.existing').hide(); 
 
    \t $('.new').show(); 
 
    } 
 
    else{ 
 
    \t $('.existing').show(); 
 
    \t $('.new').hide(); 
 
    } 
 
}); 
 
$('.addanswer').click(function(){ 
 
\t var answerClone=$(this).parent('.answers').find('.answer').eq(0).clone(); 
 
    $(this).parents('.answers').append(answerClone); 
 
});

body { 
 
    margin: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div id="questions"> 
 
     <h2>Questions</h2> 
 
     <hr> 
 
     <div class="question"> 
 
      <div class="radio-inline"> 
 
       <label><input type="radio" name="quest" value="new"> New Question 
 
       </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
       <label><input type="radio" name="quest" value="existing"> Existing Question 
 
       </label> 
 
      </div> 
 
      <div class="new"> 
 
       <div class="form-group"> 
 
        <label for="descripton">Description</label> 
 
        <input class="form-control" type="text" name="question[description][]" 
 
          placeholder="Enter question description"> 
 
       </div> 
 
       <div class="answers"> 
 
        <button class="btn btn-flat addanswer"><i class="fa fa-plus-circle"></i> 
 
         Answer 
 
        </button> 
 
        <div class="answer form-group"> 
 
         <label for="answer">Answer</label> 
 
         <input type="text" class="form-control" name="question[answer][]"> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <div class="existing"> 
 
       <select name="question"> 
 
        <option value="A">AAA</option> 
 
        <option value="B">BBB</option> 
 
        <option value="C">CCC</option> 
 
        <option value="D">DDD</option> 
 
        <option value="E">EEE</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

使用。

 $("#new").change(function() { 
      var val = $("#new").val(); 
      if (val == 'new') { 
      $(".existing").css('display','none'); 
      $(".new").css('display','block'); 
      } 
     }); 
     $("#existing").change(function() { 
      var val = $("#existing").val(); 
      if (val == 'existing') { 
      $(".new").css('display','none'); 
      $(".existing").css('display','block'); 
      } 
     }); 
     $('#addanswer').click(function(){ 
      var answerClone=$('.answer').eq(0).clone().appendTo('#answers'); 
     });