不同浏览器上的 jquery 脚本问题

Question

我对以下脚本有问题，如果输入的数字是>100，或者条目的总和是>100，它基本上会将输入数字的颜色从黑色变为红色。

第一部分很好，但由于我无法控制总条目，因为它是在后端（.confirmit-as-sum-field）计算的，我只能抓取正在显示的文本，看看它是否超过限制。这在 Chrome 中工作正常，但不能在 IE 中工作，例如 IE 似乎延迟了颜色变化，有两个文本框，如果第一个是 70，第二个是 40，则总数将是 110，总数仍将是黑色字体，它会变成红色，直到我在第二个框中再添加一个数字到 400， 这使得总数为470。如果我在任何一个框中添加更多数字，它将继续显示为红色。但是，如果我第一次将总数降至 100 以下，字体的颜色仍将为红色，如果我第二次将数字调整为低于 100 标记的另一个数字，它只会变为黑色。

这是脚本，不确定您是否可以在此处看到任何特定于浏览器的问题，或者我可以尝试的替代方法：

//flag numbers over 100%
$('.numberinput').each(function()
{
$(this).keyup(function(){
if($(this).val()>100){$(this).css('color','red');}
else{$(this).css('color','black');}
//flag total over 100%
var sum = $('.confirmit-as-sum-field').text();
if(parseInt(sum) >100){$('.confirmit-as-sum-field').css('color','red')}
else{$('.confirmit-as-sum-field').css('color','black')}
});
});

非常感谢，罗伊

---

这是后端位，不确定这是否有任何帮助：

 var args = ["wix-components","wix-numeric","wix-auto-sum","wix-focus-first","yui-later"],
            yui3 = YUI({
                loadErrorFn: showFieldsets,
                groups: {
                    wix: {
                        base: '/cf_clientutil/wix/',
                        combine: false,
                        modules: {"confirmit-cblib":{"fullpath":"/cf_clientutil/scripts/cblib-min.js?v=2891_P19c","requires":["dom","event","node","oop"]},"confirmit-dedchain":{"fullpath":"/cf_clientutil/scripts/dedchain-min.js?v=2891_P19c","requires":["confirmit-cblib"]},"wix":{"path":"wix-min.js?v=2891_P19c","requires":["node"]},"wix-components":{"path":"wix-components-min.js?v=2891_P19c","requires":["wix","confirmit-cblib","plugin","base","selector-css3"]},"wix-slider-base":{"path":"slider-base-min.js","requires":["wix","event-resize"]},"wix-numeric":{"path":"numeric-min.js?v=2891_P19c","requires":null},"wix-auto-sum":{"path":"auto-sum-min.js?v=2891_P19c","requires":null},"wix-focus-first":{"path":"wix-focus-first-min.js?v=2891_P19c","requires":["wix"]}}
                    }
                },
                allowRollup: false,
                filter: '',
                comboBase: '/wix/combo.aspx?',
                combine: true
            });
        args.push( function(Y) {
            var wix = Y.WixInstance = new Y.Wix( {"formId":"ctlform","debug":false,"capi":false,"offline":false,"defaultLanguage":9} );
            Y.WixInstance.addComponent({"type":"Numeric","hostId":"ps1_1","fieldsetId":"fieldset_ps1","digits":3,"decimals":0,"thousandSep":"%2C","decSep":"."});
            Y.WixInstance.addComponent({"type":"Numeric","hostId":"ps1_2","fieldsetId":"fieldset_ps1","digits":3,"decimals":0,"thousandSep":"%2C","decSep":"."});
            Y.WixInstance.addComponent({"type":"AutoSum","fieldsetId":"fieldset_ps1","questionType":"multi","inputPrefix":"","inputSuffix":"%","scale":0,"sumLabel":"Total"});
            window.wix = Y.WixInstance;
            window.wix.Y = Y;
        window.onerror = Y.WixInstance.handleError;
            Y.WixInstance.fire('ready');
        } );
        yui3.use.apply(yui3, args);

    } else {
        showFieldsets();
    }
})();

Answer 1

据我了解，这是因为您在后端进行计算，但在按键时检查总和。尝试创建一个回调函数来检查总和。

以下是

正在发生的事情：

• 您输入一个数字
• 对后端的 AJAX 调用
• 您检查总和
• AJAX 返回并填充总和字段
• 什么也没发生
• 您输入另一个号码
• 对后端的 AJAX 调用
• 您检查总和，找到上一次 AJAX 调用的结果
• 等。。。

这就是为什么您的总和检查器似乎总是"晚按一次键"。

更新

快速浏览后端后，它似乎确实进行了一些 AJAX 调用，我没有注意到它允许您设置回调。这可能是导致延迟的原因。所以这就是我要做的：我会为你的 sum 字段元素设置一个 onchange 侦听器，并检查总和并在每次更改时绘制数字。像这样：

$（'.

confirmit-as-sum-field'）.on（'change'， function（）{ var sum = $（'.confirmit-as-sum-field'）.text（）; if（parseInt（sum）>100）{$（'.confirmit-as-sum-field'）.css（'color'，'red'）} else{$（'.confirmit-as-sum-field'）.css（'color'，'black'）} });

这就是它应该如何用于非表单元素：http://jsfiddle.net/FUtb9/1/（尝试从您的 DevTools 更改其值）

$('p.confirmit-as-sum-field').bind('DOMNodeInserted DOMSubtreeModified DOMNodeRemoved', function(event)    {
    var sum = + $('p.confirmit-as-sum-field').text();
    if(parseInt(sum) >100){$('.confirmit-as-sum-field').css('color','red')}
    else{$('p.confirmit-as-sum-field').css('color','black')}
    alert(sum);
});

下面是一个输入字段，您可以使用该字段来更改 sum 字段元素的文本：http://jsfiddle.net/FUtb9/2/