jQuery 事件不切换 Div
jQuery Event Does Not Toggle Divs
我想制作一个基于美元和百分比的折扣系统。所以我做了这个表格:
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="type" class="control-label">Type of discount</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="type" id="type">
<label class="form-check-label" for="type">
Dollar
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="type" id="type" checked>
<label class="form-check-label" for="type">
Percentage
</label>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="value" class="control-label">Value of dicount</label>
<small id="typepercent">percentage</small>
<small id="typedollar">dollars</small>
<br>
<input type="text" id="value" name="value" class="form-control" value="" autofocus>
</div>
</div>
所以基本上用户可以选择美元类型或百分比类型之间的折扣类型。
然后在下一次输入时,他们必须写下折扣值。如果他们选择了百分比,则必须显示此文本:
<small id="typepercent">percentage</small>
否则显示:
<small id="typedollar">dollars</small>
现在为了做到这一点,我添加了这个脚本:
const typedis = document.querySelector('#type');
typedis.addEventListener('change', e => {
if(e.target.checked === true) {
$("#typepercent").hide();
$('#typedollar').show();
}else{
$("#typepercent").show();
$('#typedollar').hide();
}
});
但现在无法正常运行!
我的意思是当我第一次更改为 Dollar 时,它正确显示 #typedollar
但是当我返回 Percentage 时,#typedollar
div 仍然显示,但它必须是隐藏并且 #typepercent
必须出现。
那么这里出了什么问题?我该如何解决这个问题?
请不要对多个元素使用相同的 ID。您只需要使用简单的 jquery 并在您的无线电输入元素中添加一个 class。
$(document).ready(function() {
$('.form-check-input').on("change", function(){
if($(this).hasClass("dollar")) {
$("#typepercent").hide();
$('#typedollar').show();
}else{
$("#typepercent").show();
$('#typedollar').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="type" class="control-label">Type of discount</label>
<div class="form-check">
<input class="form-check-input dollar" type="radio" name="type" id="type">
<label class="form-check-label" for="type">
Dollar
</label>
</div>
<div class="form-check">
<input class="form-check-input percentage" type="radio" name="type" id="type" checked>
<label class="form-check-label" for="type">
Percentage
</label>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="value" class="control-label">Value of dicount</label>
<small id="typepercent">percentage</small>
<small id="typedollar">dollars</small>
<br>
<input type="text" id="value" name="value" class="form-control" value="" autofocus>
</div>
</div>
</body>
我想制作一个基于美元和百分比的折扣系统。所以我做了这个表格:
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="type" class="control-label">Type of discount</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="type" id="type">
<label class="form-check-label" for="type">
Dollar
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="type" id="type" checked>
<label class="form-check-label" for="type">
Percentage
</label>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="value" class="control-label">Value of dicount</label>
<small id="typepercent">percentage</small>
<small id="typedollar">dollars</small>
<br>
<input type="text" id="value" name="value" class="form-control" value="" autofocus>
</div>
</div>
所以基本上用户可以选择美元类型或百分比类型之间的折扣类型。
然后在下一次输入时,他们必须写下折扣值。如果他们选择了百分比,则必须显示此文本:
<small id="typepercent">percentage</small>
否则显示:
<small id="typedollar">dollars</small>
现在为了做到这一点,我添加了这个脚本:
const typedis = document.querySelector('#type');
typedis.addEventListener('change', e => {
if(e.target.checked === true) {
$("#typepercent").hide();
$('#typedollar').show();
}else{
$("#typepercent").show();
$('#typedollar').hide();
}
});
但现在无法正常运行!
我的意思是当我第一次更改为 Dollar 时,它正确显示 #typedollar
但是当我返回 Percentage 时,#typedollar
div 仍然显示,但它必须是隐藏并且 #typepercent
必须出现。
那么这里出了什么问题?我该如何解决这个问题?
请不要对多个元素使用相同的 ID。您只需要使用简单的 jquery 并在您的无线电输入元素中添加一个 class。
$(document).ready(function() {
$('.form-check-input').on("change", function(){
if($(this).hasClass("dollar")) {
$("#typepercent").hide();
$('#typedollar').show();
}else{
$("#typepercent").show();
$('#typedollar').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="type" class="control-label">Type of discount</label>
<div class="form-check">
<input class="form-check-input dollar" type="radio" name="type" id="type">
<label class="form-check-label" for="type">
Dollar
</label>
</div>
<div class="form-check">
<input class="form-check-input percentage" type="radio" name="type" id="type" checked>
<label class="form-check-label" for="type">
Percentage
</label>
</div>
</div>
</div>
<div class="row">
<div class="form-group col">
<span class="text-danger">*</span>
<label for="value" class="control-label">Value of dicount</label>
<small id="typepercent">percentage</small>
<small id="typedollar">dollars</small>
<br>
<input type="text" id="value" name="value" class="form-control" value="" autofocus>
</div>
</div>
</body>