Question

我在输入字段的两侧都有简单的加号和减号按钮，如下面的代码所示

<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%" onclick="subst()" />&nbsp;
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="<?php echo set_value('noOfRoom'); ?>" name="noOfRoom" />&nbsp;
<input type="button" value="+" id="adds" onclick="add()" class="btn btn-default" />

旨在添加或减去房间，同时添加房间和jquery功能

function add() {
    var a = $("#noOfRoom").val();
    a++;
    if (a => 1) {
        $("#subs").removeAttr("disabled");
    }
    $("#noOfRoom").val(a);
};

function subst() {
    var b = $("#noOfRoom").val();
    if (b.length > 0 && b >= 1) {
        b--;
        $("#noOfRoom").val(b);
    }
    else {
        $("#subs").attr("disabled", "disabled");
    }
};

但显示以下问题

当我在初始阶段点击减去（ - ）按钮时，-1显示在输入框中，默认情况下，应禁用减法（ - ）按钮以使房间编号为负数。
每次点击加号或减号按钮时，数字都会加2或减去2.我怎么能解决？

Answer 1

移动评论以回答，因为没有人接受这些建议：

我建议不要在jQuery中使用内联onclick=处理程序。他们无缘无故地将事件处理程序与事件代码分开，并且不允许使用jQuery事件处理程序的额外功能。
对DOM元素属性（如已禁用）使用prop而非attr。这具有获取boolean值的额外优势。
然后您可以简单地使用!a来控制禁用状态（因为您只检查0）。
作为一个好习惯，总是选择一次并保存选择器。

e.g。

$('#adds').click(function add() { var $rooms = $("#noOfRoom"); var a = $rooms.val(); a++; $("#subs").prop("disabled", !a); $rooms.val(a); }); // Set initial disabled state $("#subs").prop("disabled", !$("#noOfRoom").val()); $('#subs').click(function subst() { var $rooms = $("#noOfRoom"); var b = $rooms.val(); if (b >= 1) { b--; $rooms.val(b); } else { $("#subs").prop("disabled", true); } });

JSFiddle： https://jsfiddle.net/k7nyv84b/4/

Answer 2

更新添加小提琴https://fiddle.jshell.net/n7ug52dr/

每次点击只会加1并减去1，它永远不会显示-1

您可以编辑以下代码：

function add() {
    var a = $("#noOfRoom").val();
    a++;
    if (a && a >= 1) {
        $("#subs").removeAttr("disabled");
    }
    $("#noOfRoom").val(a);
};

function subst() {
    var b = $("#noOfRoom").val();
    // this is wrong part
    if (b && b >= 1) {
        b--;
        $("#noOfRoom").val(b);
    }
    else {
        $("#subs").attr("disabled", "disabled");
    }
};

Answer 3

你去，冠军！使您的代码更清洁

请参阅下面的工作示例

＆＃13;

$(function(){

  $('#adds').on('click',add);
  $('#subs').on('click',remove);

});


function add(){

  var input = $('#noOfRoom'),
      value = input.val();
      
  input.val(++value);
  
  if(value > 0){
    $('#subs').removeAttr('disabled');
  }

}


function remove(){

   var input = $('#noOfRoom'),
       value = input.val();
      
   if(value > 0){
     input.val(--value);
   }else{
     $('#subs').attr('disabled','disabled');
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="subs" class="btn btn-default pull-left" style="margin-right: 2%"/>&nbsp;
<input type="text" style="width: 410px;text-align: center; margin: 0px;" class="onlyNumber form-control pull-left" id="noOfRoom" value="0" name="noOfRoom" />&nbsp;
<input type="button" value="+" id="adds" class="btn btn-default" />

＆＃13;

Answer 4

看看这个solution

<input type="button" value="-" id="subs" onclick="subst()" disabled>
 <input type="text" id="noOfRoom">
<input type="button" value="+" id="adds" onclick="add()">



function add() {
var a = $("#noOfRoom").val();
a++;
if (a >= 1) {
    $("#subs").removeAttr("disabled");
}

alert(a);
$("#noOfRoom").val(a);
}

function subst() {
var b = $("#noOfRoom").val();
if (b.length > 0 && b >= 1) {
    b--;
  alert(b);
    $("#noOfRoom").val(b);
}
else {
    $("#subs").attr("disabled", "disabled");

}

//提醒（＆＃39;运作良好＆＃39;）; }

Answer 5

最简单的方法是使用DOM浏览元素并获取其当前值，然后增加/减少它们。

我扩展了代码，以确保点击减号按钮后值不会降到零以下。

＆＃13;

<input type="button" value="-" class="qtyminus" field="quantity"> 
<input type="number" class="input-lg" id="quantity" name="quantity" value="1" min="1" style="padding:0px;height:30px;">
<input type="button" value="+" class="qtyplus" field="quantity">
<input type="submit" name="add" id="add" class="btn btn-large btn-border btn-dark" value="GET IT NOW" style="opacity: 1;">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});
          
</script>

＆＃13;

jQuery递增或递减变量1

6 个答案: