最小化jQuery函数

我有一个函数可以根据行名添加表单项的变化事件（使用数据库来获取这些变量）。最小化jQuery函数

继承人的当前功能：

$sql = "SELECT * FROM product WHERE storeno = '1' ORDER BY descript"; 
    $result = mssql_query($sql, $msConnection); 

    if ($result && mssql_num_rows($result) > 0) { 
     while ($row = mssql_fetch_object($result)) { 
      $sku = trim($row->mas90sku); 
      $JQueryReadyScripts .= " 
      $('#newCount_" . $sku . "_row .cases').change(function() { 
       var count = 0; 
       $('#newCount_" . $sku . "_row .cases').each(function() { 
        count += parseFloat($(this).val()); 
       }); 
       $('#cases_total_" . $sku . "').text(count); 
      }); 
      $('#newCount_" . $sku . "_row .units').change(function() { 
       var count = 0; 
       $('#newCount_" . $sku . "_row .units').each(function() { 
        count += parseFloat($(this).val()); 
       }); 
       $('#units_total_" . $sku . "').text(count); 
      });"; 
     } 
     mssql_free_result($result); 
    }

我怎样才能整合成影响的每一行调用，这样我可以摆脱DB部分和刚刚2个（或1）的代码，而不是每行2个。

来源

2012-04-07 spyke01

$('*[id^=newCount_]').each(function() { 
    var $row = $(this), 
     sku = this.id.replace(/newCount_(.*?)_row/, '$1'); 

    function sumValues($elems) { 
    var sum = 0; 
    $elems.each(function() { sum += parseFloat(this.value) }); 
    return sum; 
    } 

    $.each(['cases', 'units'], function (i, type) { 
    $row.on('change', '.' + type, function() { 
     $('#' + type + '_total_' + sku).text(sumValues($row.find('.' + type))); 
    }); 
    }); 
});

这对PHP没有依赖性，只是把它作为一个楷书。

它使用.on()事件委托，所以它需要jQuery 1.7+。对于早期版本的jQuery，您可以使用.delegate()获得相同的效果。

我建议给所有的行都设置一个通用的CSS类，这样可以用简单的东西代替不太好的$('*[id^=newCount_]')，但这是一个整体变化。

来源

2012-04-07 04:41:34 Tomalak

使用它时，我得到这个错误：$ elems没有定义 – spyke01 2012-04-07 16:19:52

@ spyke01哎呀。现在已经解决了。 – Tomalak 2012-04-07 16:52:33

真棒，这正是我所需要的，感谢教我一些新的jQuery！ – spyke01 2012-04-08 01:04:01

你可以做这样的事情，对于两种情况，各单位（不过请注意，您将需要相应地改变总的计数的id）

$('.cases').change(function() { 
    var id = $(this).attr('id'); 
    var count = 0; 
    $('#'+id+' .cases').each(function() { 
     count += parseFloat($(this).val()); 
    }); 
    $('#count_'+id).text(count); 
});

来源

2012-04-07 04:24:34 Kurt

类选择器和ID选择之间的主要区别在于预期编号选择器是唯一的，类选择器不是。

在变化事件的主体中使用$（this），所以操作是相对的，您可以编写一个处理所有情况的单个更改事件。

<input class="cases" id="newCount_123"></input> 
<input class="cases" id="newCount_345"></input> 

$('.cases').change(function() { 
      var count = 0; 
      var sku = $(this).attr("id"); 
      count += parseFloat($(this).val()); 
      $('#cases_total_' + sku).text(count); 
});

这也使JavaScript超出了您的PHP，这很难维护并违反了MVC原则。您的服务器端代码执行检索数据并将其发送给客户端的工作，而您的客户端代码完成其处理视图的工作。

来源

2012-04-07 04:26:04 jmort253

我不确定这是否适用于您的两项功能。不确定确切的标记。但可能值得尝试。

$('#newCount_' + $sku + '_row .cases, #newCount_' + $sku + '_row .units').change(function() { 
    var count = 0, 
     thisClass = ($(this).hasClass('cases')) ? 'cases' : 'units'; 

    $('#newCount_" . $sku . "_row .'+thisClass).each(function() { 
     count += parseFloat($(this).val()); 
    }); 
    $('#'+thisClass+'_total_" . $sku . "').text(count); 
});

来源

2012-04-07 04:39:06 mikevoermans

最小化jQuery函数

回答

相关问题