jQuery数量（输入值）+ / - 按钮不能在IE7上运行

Question

这是我的代码：http://jsfiddle.net/9Vvpj/4/

请帮我弄清楚为什么除了IE7之外，其他一切工作正常！

看起来像我的变量：

var quantity = quantity_input.val();

未定义

Answer 1

您不能在单个文档上拥有多个ID - 这就是您的代码无效的原因....

请改为尝试：

    var this_id = jQuery(this).data('input');

这使用data() function 来获取HTML中的'data-input`属性。我也更新了HTML，而不是

<div id="CartProduct-118" class="quantityDown">-</div>

做

<div data-input="CartProduct-118" class="quantityDown">-</div>

Working exmaple

Answer 2

不要对不同的元素使用相同的ID。即使在支持它的浏览器中，也不是DOM的工作方式。

如果您使用此代码查找输入，则甚至不需要ID：

var quantity_input = $(this).parent().siblings(".quantity")

明确指定您正在处理数字也是一个好主意：

var quantity = parseInt(quantity_input.val());

请注意，使用开发人员工具切换到IE7时此方法有效： http://jsfiddle.net/9Vvpj/5/

Answer 3

我建议你切换到这个组件： http://view.jqueryui.com/master/demos/spinner/default.html

要使其在webkit浏览器中运行，您必须将其添加到css：

                input[type=number]::-webkit-inner-spin-button,
                input[type=number]::-webkit-outer-spin-button
                {
                    -webkit-appearance: none;
                    margin: 0;
                }