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

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

代码：

＆＃13;

＆＃13;

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

＆＃13;

body {
    margin: 10px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用以下jquery代码。

        $( "#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');
        });