Question

我正在尝试使用jQuery .hide()方法隐藏元素。

选择活动单选按钮时，应隐藏一个元素。问题是，当我选择活动按钮时，什么也没发生，但是在那之后，当我单击屏幕上的任何位置时，该元素都被隐藏了。

我已将代码上传到jsfiddle上，找到了here。

有人可以帮助我了解为什么会发生这种情况以及如何解决吗？

Answer 1

您最终需要在单击单选按钮后再次单击屏幕，因为这是唯一一次运行隐藏/显示逻辑。

如评论中所述，使用change事件。

$(".btn-group input").change(function(){
  if($("[name='different_price']:checked").attr('id')=='different_price_a'){
    $("#pricing_col").hide("slow");
  }
  else {
    $("#pricing_col").show("slow");
  }
});

我对此提琴版本进行了相同的更新：https://jsfiddle.net/nvq873u5/29/

Answer 2

尝试JSFiddle：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>


<div class="content">
                <div class="row">
                  <div class="col-lg-12 text-center">

                <div class="form-group">

                <h5>Use standard Pricing.</h5>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
              <label class="btn btn-secondary">
                <input type="radio" name="different_price" id="different_price_na" autocomplete="off"> Not Active
              </label>
              <label class="btn btn-secondary active">
                <input type="radio" name="different_price" id="different_price_a" autocomplete="off" checked=""> Active
              </label>
            </div>
          </div>
            <hr>

            </div>
                </div>

            <div id="pricing_col" style="">
              <div class="row">


            <div class="col-lg-12">
                  <div class="form-group ">
                    <label for="id_orignal_price">Orignal Price</label>
                    <input type="number" name="orignal_price" class="form-control" id="id_orignal_price" step="0.01" required="">

                  </div>
                </div>

                  </div>
                  <div class="row">
                    <div class="col-12 col-md-6 col-sm-6">
                      <div class="form-group ">
                        <label for="id_discount">Discount</label>
                        <input type="number" name="discount" class="form-control" id="id_discount" step="0.01" required="">

                      </div>
                  </div>
                    <div class="col-12 col-md-6 col-sm-6">
                      <div class="form-group ">
                        <label for="id_shiping_price">Shipping Price</label>
                        <input type="number" name="shiping_price" class="form-control" id="id_shiping_price" step="0.01" required="">

                      </div>
                    </div>
                      </div>
                      <div class="text-center">
                        <hr>
                                <div class="row">
                                    <div class="col-md-3 col-md-offset-1">
                                        <h5>12<br><small>Orignal Price</small></h5>
                                    </div>
                                    <div class="col-md-4">
                                        <h5>2<br><small>Discount</small></h5>
                                    </div>
                                    <div class="col-md-3">
                                        <h5>24,6$<br><small>Final Price</small></h5>
                                    </div>
                                </div>
                            </div>
            </div>



              </div>
<script>
$(document).ready(function() {

  var different_price = $("input[name='different_price']")


    $(document.body).on('change', different_price, function() {
      if($("[name='different_price']:checked").attr('id')=='different_price_a')
      {

$("#pricing_col").show("slow");
      }
      else {
        $("#pricing_col").hide("slow");
      }
    });



});

为什么需要额外的屏幕单击来隐藏元素？

2 个答案: