Question

是否有可能在左侧使用减号按钮进行数字输入，在右侧使用加号按钮？或者也许 - ++以更大的步骤改变价值。

我知道我不是第一个问这个但是： This解决方案在第一回合没有正确显示，而Github的jQuery-Mobile-Stepper-Widget（由于我是新手而无法发布另一个链接）不能与当前版本的jQuery Mobile一起使用。

结果应该类似于此问题中的屏幕截图：Has anyone implemented jQuery Mobile Add (+/-) Button Number Incrementers?分别是jQuery Mobile中的水平分组按钮

使用当前版本的jQuery mobile的任何想法或新片段？

Answer 1

这是一个提示，其余的是纯粹的 CSS 作业和额外的 JS 代码来控制值，例如：最大，最小......等等。

<强> HTML

 <div data-role="controlgroup" data-type="horizontal" data-mini="true">
   <button id="plus" data-inline="true">+</button>
   <input type="text" id="number" value="0" disabled="disabled" />
   <button id="minus" data-inline="true">-</button>
 </div>

<强>代码

$('#plus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value++;
    $('#number').val(value);
});

$('#minus').unbind('click').bind('click', function () {
    var value = $('#number').val();
    value--;
    $('#number').val(value);
});

JSFiddle

Answer 2

在jQM中，输入类型编号可以实现您想要的大部分魔法

<input type="number" name="number" value="0"/>

如果你需要更多花哨的造型，你必须遵循Omar的代码

Answer 3

<i onclick="qty('plus');" class="fa fa-plus c_pointer"></i>
<input type="text" id="prdqty" name="qty" value="1" placeholder="1">
<i onclick="qty('minus');" class="fa fa-minus c_pointer"></i>
function qty(val){
pqty = $('#prdqty').val();
if (val == "plus") {
  var newVal = parseFloat(pqty) + 1;
} else {
if (pqty > 1) {
  var newVal = parseFloat(pqty) - 1;
} else {
  newVal = 1;
}
}
$('#prdqty').val(newVal);
}

jQuery Mobile：内联数字输入和加/减按钮

3 个答案: