Minimieren Sie die jQuery-Funktion

Question

Ich habe eine Funktion, die Änderungsereignisse für Formularelemente basierend auf dem Zeilennamen hinzufügt (verwendet die Datenbank, um diese zu erhalten).

Heres die aktuelle Funktion:

$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); 
    } 

Wie kann ich dies in einen Aufruf konsolidieren, die so jede Zeile beeinflusst, dass ich loswerden der DB Teil bekommen kann und nur noch 2 Stück (oder 1) von Code statt von 2 für jede Reihe.

Answer 1

$('*[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))); 
    }); 
    }); 
}); 

Dies hat keine Abhängigkeit von PHP, es nur als reguläres Skript verwenden.

Es verwendet .on() Ereignisdelegierung, also erfordert es jQuery 1.7+. Für frühere Versionen von jQuery können Sie .delegate() für denselben Effekt verwenden.

Ich würde empfehlen, alle Ihre Zeilen eine gemeinsame CSS-Klasse, so dass die nicht so nette $('*[id^=newCount_]') durch etwas einfacher ersetzt werden kann, aber das ist eine kosmetische Änderung.

Answer 2

Sie könnten etwas tun für beide Fälle und Einheiten (Es genügt bemerken, müssen Sie die IDs der Gesamtzählungen entsprechend ändern)

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

Answer 3

Der wesentliche Unterschied zwischen Klasse Selektoren und ID-Selektoren ist, wo Es wird erwartet, dass ID-Selektoren eindeutig sind, Klassenselektoren dagegen nicht.

Mit $ (this) im Textkörper Ihrer Änderungsereignisse, so dass die Operationen relativ sind, könnten Sie ein einzelnes Änderungsereignis schreiben, das alle Fälle behandelt.

<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); 
}); 

Dies hält auch JavaScript aus Ihrem PHP, die behaupten schwer ist und verstößt gegen Grundsätze MVC. Ihr serverseitiger Code erledigt seine Aufgabe, Daten abzurufen und an den Client zu senden, während Ihr clientseitiger Code die Aufgabe übernimmt, mit der Ansicht umzugehen.

Answer 4

Ich bin mir nicht sicher, ob dies für beide Ihrer Funktionen funktioniert oder nicht. Nicht sicher über die genaue Auszeichnung. aber könnte einen Versuch wert sein.

$('#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); 
});