Question

在那里，我想让我的按钮可以在我点击按钮时显示和隐藏 - 隐藏：当我点击按钮减去 - 显示：当我点击按钮加上

$('.btn-plus').click(function() {
  var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
  var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
  var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
  var new_qty = qty + 1;
  var new_price = price * new_qty;
  $(this).parents('.input-group').find('.input-number').val(new_qty);
  $("#price" + id).text("Rp. " + new_price.number_format(0));
})
$('.btn-minus').click(function() {
      var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
      var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
      var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
      var new_qty = qty - 1;
      if (new_qty < 1) {
        return
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group" style="width: 150px;">
  <span class="input-group-btn">
                  <button type="button" class="btn btn-danger btn-number btn-minus"  data-type="minus">
                    <span class="glyphicon glyphicon-minus"></span>
  </button>
  </span>
  <input type="text" name="quantity[]" class="form-control input-number" value="0" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100" required>
  <span class="input-group-btn">
                  <button type="button" class="btn btn-success btn-number btn-plus" data-type="plus" >
                      <span class="glyphicon glyphicon-plus"></span>
  </button>
  </span>
</div>

这就是我要制作的节目隐藏

<input type='submit' class='btn btn-lg btn-success button-float' value="Book Now">

Answer 1

将$(":submit").show();添加到加号按钮调用的函数中。

将$(":submit").hide();添加到减号按钮调用的函数中。

Answer 2

$(element).hide()将display设置为none

$(element).show()将显示设置为原始值

因此，请将您的代码更改为以下内容：

var sumbit = $(":submit");
$('.btn-plus').click(function() {
    $(submit).show(); //Or wherever else you want it.
    var qty = parseInt($(this).parents('.input-group').find('.input-number').val());    
    var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));    
    var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));    
    var new_qty = qty + 1;
    var new_price = price * new_qty;    
    $(this).parents('.input-group').find('.input-number').val(new_qty);
    $("#price"+id).text("Rp. "+new_price.number_format(0);
});
$('.btn-minus').click(function() {
    $(submit).hide(); //Or wherever else you want it.
    var qty = parseInt($(this).parents('.input-group').find('.input-number').val());   
    var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));    
    var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));    
    var new_qty = qty - 1;
    if(new_qty < 1){
      return;
});

Answer 3

以下是您的完整解决方案：

＆＃13;

$('.btn-plus').click(function() {
  var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
  var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
  var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
  var new_qty = qty + 1;
  var new_price = price * new_qty;
  $(this).parents('.input-group').find('.input-number').val(new_qty);
  $("#price" + id).text("Rp. " + new_price);
  $(".btn-submit").show();
});

$('.btn-minus').click(function() {
  var qty = parseInt($(this).parents('.input-group').find('.input-number').val());
  var price = parseInt($(this).parents('.input-group').find('.input-number').attr('data-price'));
  var id = parseInt($(this).parents('.input-group').find('.input-number').attr('data-id'));
  var new_qty = qty - 1;
  var new_price = price * new_qty;
  if (new_qty < 1) {
    new_qty = 0;
    new_price = 0;
    $(".btn-submit").hide(); //Or wherever else you want it.
  }
  $(this).parents('.input-group').find('.input-number').val(new_qty);
  $("#price" + id).text("Rp. " + new_price);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
<div class="input-group" style="width: 150px;">
  <span class="input-group-btn">
              <button type="button" class="btn btn-danger btn-number btn-minus"  data-type="minus">
                <span class="glyphicon glyphicon-minus"></span>
  </button>
  </span>
  <input type="text" name="quantity[]" class="form-control input-number" value="0" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100" required>
  <span class="input-group-btn">
              <button type="button" class="btn btn-success btn-number btn-plus" data-type="plus" >
                  <span class="glyphicon glyphicon-plus"></span>
  </button>
  </span>
</div>

<input type='submit' class='btn btn-lg btn-success button-float btn-submit' value="Book Now">

＆＃13;

JavaScript显示隐藏按钮

3 个答案: