实现同一个class的文本框值相加

Question

根据之前高手指点的代码,已经实现了点击某文本框的值显示该值,但是没有全部相加显示,应该怎么修改<script type="text/javascript">
$(document).ready(function() {     
     window.setInterval("ajaxStatusRequest();",1000);
    });  
function ajaxStatusRequest(){ 
            var data = {};
            $(".inpbot1").each(function (index, obj) {
                $(obj).bind("blur", function () {//这行代码应该怎么修改?
                    data[index] = $(this).val();
                    showResult();
                }).bind("keyup", function () {
                    var v = $(this).val();
                    $(this).val(v.replace(/[^\d\.]/g, '0'));
                });
            });
            function showResult() {
                var r = 0;
                for (var i = 0; i < $(".inpbot1").length; i++) {//这里要求所有值相加,应该是错误的吧?
                    if (data[i]) {
                        r += parseFloat(data[i]);
                    }
                }
                $("#labAllResult").html(r);
                $.ajax({
                    type: "GET",
                    url: "DaXie.ashx",
                    data: "r=" + r,
                    success: function (msg) {
                        $("#Label1").html(msg);
                    }
                });
            }
            }
</script>现在的这个很卡,点几个文本框就死机了,应该是触发事件的问题,代码怎么优化啊?
望高手继续指点

Answer 1

你的性能不慢就怪了
你看你的代码 上来就每隔1秒发ajax请求 并发次数过多 页面响应不及时
再者每次函数内部的逻辑代码不够精简 许多语句涉及到性能点 楼主并未优化
比如 for循环条件的优化 +=的操作 包括你的jq语法上 都有优化的余地 

Answer 2

document.getElementsByTagName("input");
然后判断是否是你想要的选框，再运算！！！

Answer 3

问题不在于getElementsByTagName("input");
楼主的思路必须要每隔1秒发一次请求么？这样前端有些吃不消 再怎么优化也会有些性能上的问题
代码中的优化点 给楼主几个意见
1、+= 用数组push代替 能提成局部变量的局部变量处理 尤其是像$(".inpbot1").length
2、jq操作元素 看是否有必要每次都要绑定事件
等等吧 能少做的尽量少做

Answer 4

LZ可以按照这里的优化下，比如第1条我给你的代码，绑定事件是ready一次性初始化的操作，LZ竟然放到一个定时器里面了其实LZ的困惑在于如何检测文本框文本变化的问题，你可以监控用户的keyup等键盘事件，可以参考autocomplete的文本监控

Answer 5

LZ还不如直接在文本框失去焦点的时候，做累乘操作好了，你考虑文本变化的问题，还得考虑我鼠标粘帖的问题，我自己写的autocomplete利用的是定时器监控文本框的值，不过LZ不需要把问题复杂化吧，顺便请教一下2L的大大，你所提的优化，大部分都知道，也是有点偷懒的关系，但是你提到JQ的语法上优化，能指教一二吗？

Answer 6

监听文本输入框(input type="text")的值变化的事件：
IE：onpropertychange
Firefox：oninput

Answer 7

opera对于oninput支持不是很好，比如我用鼠标剪切文本不过对于你的需求，应该够了，你可以将你的定时器替换掉

Answer 8

<script type="text/javascript">
$(document).ready(function() {     
            var data = {};
            $(".inpbot1").each(function (index, obj) {
                $(obj).bind("blur", function () {
                    data[index] = $(this).val();
                    showResult();
                }).bind("keyup", function () {
                    var v = $(this).val();
                    $(this).val(v.replace(/[^\d\.]/g, '0'));
                });
            });//
            function showResult() {
                var r = 0;
                for (var i = 0; i < $(".inpbot1").length; i++) {
                    if (data[i]) {
                        r += parseFloat(data[i]);
                    }
                }
                $("#labAllResult").html(r);
                $.ajax({
                    type: "GET",
                    url: "DaXie.ashx",
                    data: "r=" + r,
                    success: function (msg) {
                        $("#Label1").html(msg);
                    }
                });
            }
            });  </script>这里还有个错误,不讨论鼠标事件 现在就按blur来说  最后的结果也不是要把所有的相加,而是只相加鼠标点过的文本框的值,怎么修改?