单选按钮时显示/隐藏元素，并动态添加元素

Question

我有一些关于JavaScript和jQuery的问题。这是我的代码在浏览器中看起来。

• 我想告诉<div class="new">是显示和隐藏<div class="existing">如果我选择 “新问题”。然后，如果选择了“现存问题”，它会显示<div class="existing">和隐藏<div class="new">
• 我想复制<div class="question">如果“添加问题”点击
• 我想复制<div class="answer">如果“+答案”点击

这是我的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'); 
     });