我有一个函数,它根据行名为表单项添加更改事件(使用数据库获取这些事件)。
这是当前的功能:
$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段。
您可以对案例和单位都这样做(只需注意,您需要适当地更改总计数的id)
$('.cases').change(function() {
var id = $(this).attr('id');
var count = 0;
$('#'+id+' .cases').each(function() {
count += parseFloat($(this).val());
});
$('#count_'+id).text(count);
});
$('*[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_]')
,但这只是一个外观上的改变。
类选择器和id选择器之间的主要区别在于,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原则。服务器端代码负责检索数据并将其发送到客户端,而客户端代码负责处理视图。
我不确定这是否适用于您的两个函数。不确定确切的标记。但也许值得一试。
$('#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);
});