单选按钮时显示/隐藏元素,并动态添加元素
问题描述:
我有一些关于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>
<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代码?谢谢
答
这是代码:下面的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>
<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>
答
使用。
$("#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');
});
我试过了,但与我自己的代码混淆,所以我决定不把它带到这里。 @Rahul – brobrobrobrobro