Question

我有以下代码让用户按下减号并达到0，-1，-2，... -999等值：

HTML

-w

JAVASCRIPT

<table class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th class="shrink">TICKET</th>
            <th class="shrink">VALUE</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Y00001</td>
            <td>
                <div class="input-group">   <span class="input-group-btn">
                        <button class="btn btn-default btn-minuse" type="button">-</button>
                    </span>

                    <input type="text" name="Y00001" class="form-control text-center" maxlength="3" value="">   <span class="input-group-btn">
                        <button class="btn btn-default" type="button">+</button>
                    </span>

                </div>
            </td>
        </tr>
        <tr>
            <td>Y00002</td>
            <td>
                <div class="input-group">   <span class="input-group-btn">
                        <button class="btn btn-default btn-minuse" type="button">-</button>
                    </span>

                    <input type="text" name="Y00002" class="form-control text-center" maxlength="3" value="">   <span class="input-group-btn">
                        <button class="btn btn-default" type="button">+</button>
                    </span>

                </div>
            </td>
        </tr>
        <tr>
            <td>Y07851</td>
            <td>
                <div class="input-group">   <span class="input-group-btn">
                        <button class="btn btn-default btn-minuse" type="button">-</button>
                    </span>

                    <input type="text" name="Y07851" class="form-control text-center" maxlength="3" value="">   <span class="input-group-btn">
                        <button class="btn btn-default" type="button">+</button>
                    </span>

                </div>
            </td>
        </tr>
        <tr>
            <td>Y71710</td>
            <td>
                <div class="input-group">   <span class="input-group-btn">
                        <button class="btn btn-default btn-minuse" type="button">-</button>
                    </span>

                    <input type="text" name="Y71710" class="form-control text-center" maxlength="3" value="">   <span class="input-group-btn">
                        <button class="btn btn-default" type="button">+</button>
                    </span>

                </div>
            </td>
        </tr>
    </tbody>
</table>

输入如何不让值变为=＆lt; 0？因此，如果输入中没有任何内容并按减号或加号，则该值将为1.如果为1并按减号，则应保持为1。

Answer 1

$('.btn').on('click', function() {
  var $input = $(this).closest('.input-group').find('input');
  var val = +$input.val();
  val = ($(this).hasClass('btn-minuse') ? val - 1 : val + 1) || 0;
  $input.val((val < 0 ? val + 1 : val)) 
});

Answer 2

在设置输入值字段之前，您需要做的是检查值是否为0。

$('.btn').on('click', function() {
  var $input = $(this).closest('.input-group').find('input');
  var val = +$input.val();
  var newVal = $(this).hasClass('btn-minuse') ? val - 1 : val + 1;
  $input.val(newVal <= 0 ? 0 : newVal);
});

在上面的代码中，我将传递给函数的值设置为新变量newVal，然后在调用函数之前检查该变量。您的“|| 0”代码不会执行任何操作，因为只是ORing以查看上一部分是否返回了值。

JSFiddle：http://jsfiddle.net/bdb4dnpp/

Answer 3

您需要编写代码来执行您用英语编写的内容。例如：

var newval = ($(this).hasClass('btn-minuse') ? val - 1 : val + 1)
if (newval < 0)
    { newval = 1; }

Answer 4

改变这个：

$input.val(($(this).hasClass('btn-minuse') ? val - 1 : val + 1) || 0);

到

$input.val(($(this).hasClass('btn-minuse') ? (val - 1 > 0? val - 1: 1) : val + 1);

要确保用户无法输入负值，请在所有输入中添加no-neg类

<input type="text" name="Y00001" class="no-neg" ...

并添加

(".no-neg").change(function() {
    var current = parseInt(this.value, 10);
    this.value = current > 0? current: 1;
});

更新了fiddle。

Answer 5

$('.btn').on('click', function() {    
   var $input = $(this).closest('.input-group').find('input');
   var val = +$input.val();

   // add this section 
   if(val <= 0){
       $input.val('1');
       return;
   }

   $input.val(($(this).hasClass('btn-minuse') ? val - 1 : val + 1) || 0);      
});

不允许该值转到=＆lt; 0输入

5 个答案: