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）＆gt; 100）{$（'。confirmit-as-sum-field'）。css（'color'，'red'）} 其他{$（ 'confirmit-AS-总和场 '）。CSS（' 颜色'， '黑'）} }）;

这是非格式元素的工作方式：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/

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

1 个答案: