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>