Question

我正在尝试根据选择哪个单选按钮制作一个脚本来显示单独的输入。

问题是：因为我自己添加了活动类，所以显示了第一个表单，但是当我选择第二个按钮时，第二个输入却没有显示。

$(document).ready(function() {
  $('.options-switch').on('change', function() {
    $('.options').removeClass('active');
    var optionsToShow = '.options-' + $(this).data('id');
    $(optionsToShow).addClass('active');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.options {
  display: none;
}
.options.active {
  display: block;
}
</style>
      <div class="d-block my-3">
        <div class="custom-control custom-radio">
          <input id="sell" name="tradeType" type="radio" value="sell" class="custom-control-input options-switch" checked="" required="">
          <label class="custom-control-label" for="sell">Sell bitcoins online</label>
        </div>
        <div class="custom-control custom-radio">
          <input id="buy" name="tradeType" type="radio" value="buy" class="custom-control-input options-switch" required="">
          <label class="custom-control-label" for="buy">Buy bitcoins online</label>
        </div>
      </div>   

    <div class="options options-sell active">
      <h4 class="mb-3">Online selling options</h4>

      <div class="mb-3">
        <label for="payment_details">Payment details</label>
        <textarea name="payment_details" class="form-control" cols="40" rows="4"></textarea>
      </div>

      <div class="row">
        <div class="col mb-3">
          <label for="new_buyers_limit">New buyer limit</label>
          <input type="number" class="form-control" name="new_buyer_limit">
        </div>
        <div class="col mb-3">
          <label for="min_feedback_scores">Minimum feedback score</label>
          <input type="number" class="form-control" name="min_feedback_score">
        </div>              
      </div>
     </div> <!-- sell_online_options -->

    <div class="options options-buy">
    <h4 class="mb-3">Online buying options</h4>

    <div class="row">
      <div class="col mb-3">
        <label for="max_amount">Payment window</label>
        <div class="input-group-prepend">
          <input type="number" name="payment_window" class="form-control">
          <span class="input-group-text">minutes</span>
        </div>
      </div>              
    </div>
  </div> <!-- buy_online_options -->

Answer 1

ID $(this).data('id')返回undefined

尝试改用$(this).attr('id')

如何在单选按钮值上显示不同的输入

1 个答案: