javascript - jQuery 数量（输入 val）+ / - 按钮在 IE7 上不起作用

Question

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

请帮我弄清楚为什么这在 IE7 以外的所有东西中都能正常工作！

它看起来像我的变量：

var quantity = quantity_input.val();

未定义

Answer 1

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

试试这个：

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

这使用该data()函数来获取 HTML 中的“数据输入”属性。我也更新了 HTML，而不是

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

做

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

工作示例

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;
                }