最小化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函數

回答

相關問題