Zeige/Verstecken Element, wenn Optionsfeld ausgewählt, und Element dynamisch hinzufügen

Question

Ich habe ein Problem über Javascript und Jquery. Das ist mein Code im Browser.

• Ich möchte zeigen <div class="new"> ist zeigen, und <div class="existing"> verstecken, wenn ich "Neue Frage" wählen. Wenn dann „Vorhandene Frage“ gewählt, es <div class="existing"> zeigen und verstecken <div class="new">
• ich <div class="question"> duplizieren wollen, wenn „Frage hinzufügen“ geklickt
• Ich möchte <div class="answer"> duplizieren, wenn „+ Answer“ geklickt

Hier ist mein 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> 

Hat jemand eine Idee, wie der Javascript/Jquery-Code in meinem Fall? Danke

Answer 1

Das ist der Code:

$('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

Verwenden Sie den folgenden jQuery-Code.