jQuery事件不切换div

Question

我想建立一个基于美元和百分比的折扣系统。所以我创建了这个表单:

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

基本上用户可以在Dollar之间选择折扣类型类型百分比类型。

那么在下一次输入时，他们必须写出折扣的值。如果他们选择了百分比，则必须显示此文本:

<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();
      }
});

但现在它不能正常工作!

我的意思是第一次当我改变到美元，它显示#typedollar正确，但当我回到百分比，#typedollardiv仍然显示，但它必须隐藏和#typepercent必须出现。

那么这里出了什么问题?我如何解决这个问题?

Answer 1

请勿对多个元素使用相同的id。您只需要使用简单的jquery并在您的单选输入元素中添加一个类。

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