Question

我打算使用jQuery mobile来获取移动主题http://jsfiddle.net/hhken790/

HTML

<input type="button" value="-" class="qtyminus" />
<input type="text" name="myInputs[qty][]" value="0" class="qty" />
<input type="button" value="+" class="qtyplus" />

的jQuery

$("#dynamic").on("click", ".qtyplus", function (e) {
    e.preventDefault();
    var $input  = $(this).prev("input");
    var currentVal = parseInt($input.val());
    if (!isNaN(currentVal)) {
       $input.val(currentVal + 1);
    } else {
       $input.val(0);
    }
});

然而，加号和减号在这里不起作用。知道造成这种情况的原因吗？

Answer 1

当你添加jQM时，它通过添加容器div和其他DOM元素来增强/设置许多DOM元素。这意味着您的按钮和文本输入不再是DOM中的兄弟，而prev（）将不起作用。而是遍历DOM然后向下：

var $input  = $(this).closest("div#dynamic").find(".qty");

e.g：

$("#dynamic").on("click", ".qtyplus, .qtyminus", function (e) {
     e.preventDefault();
    var $input  = $(this).closest("div#dynamic").find(".qty");
    var currentVal = parseInt($input.val());
    if (!isNaN(currentVal)) {
        $(this).hasClass("qtyplus") ? $input.val(currentVal + 1) : $input.val(currentVal - 1);
    } else {
        $input.val(0);
    }
});

更新了 FIDDLE

Jquery移动加/减问题

1 个答案: