Frage von Gastonn, 46

Jquery (Javascript) in einer Funktion vereinfachen?

Hallo zusammen

Ich vermute, dass mein Jquery Code weiter vereinfacht werden könnte, da ich ansonsten ganz viel ähnlicher Code schreibe. Meine Frage ist nun, wie ich das anstellen kann.

Am Schluss möchte ich ein Total erstellen. Ich möchte resultz1 b + resultz2 b + ... usw noch zusammenrechnen. Dies sind jedoch alles <p> Tags und folglich Text und irgendwie htas trotz parseInt nicht geklappt.

Der HTML Ausschnitt sieht so aus:

http://pastebin.com/NGEpbgtq

Der dazugehörige Jquery Code so:

pastebin.com/TEyrjCmh

Vielen Dank

Grüsse Gastonn

Antwort
von tDoni, 14

Ich kann es gerade leider nicht testen, aber es sollte möglich sein, deine IDs via Schleife erstellen zu lassen. (#z1s2, #z1s1, #z2s1, #z2s2).

Die sind ja alle nach dem selben Schema aufgebaut. Zumindest von Zeile 2 - 6 sind auch die Funktionen ja identisch (abgesehen von den IDs)

Kommentar von Gastonn ,

Die IDs stehen für Zeile und Spalte. Die Zeilen sind fortlaufend und es ist immer jeweils Spalte 1 und Spalte 2 vorhanden.

Es sind zwei verschiedene Funktionen. Alle Zeilen mit einer Checkbox beinhalten eine if - else Entscheidung. Die anderen nicht.

Kommentar von tDoni ,

Schau dir das Beispiel mal an: http://pastebin.com/6bd8gZdT

Nach dem Schema kannst du die Funktionen alle reduzieren und dir die IDs erzeugen lassen.

Antwort
von Gastonn, 1

Mein Code sah am Schluss so aus:

'use strict';

// Jquery Document
$(document).ready(function(){
$('.input1, .input2').on('input', function(){
var $el = $(this);
var $tr = $el.closest('tr');
var $input1 = $tr.find('.input1');
var $input2 = $tr.find('.input2');
var $result = $tr.find('.result');

var num2 = parseFloat($input2.val());

if ($input1.attr('type') === 'checkbox') {
if($input1.prop('checked')) {
$result.text(num2);
} else {
$result.text(0);
}
} else {
var num1 = parseInt($input1.val());
var result = num1 * num2;

$result.text(result);
}

//Zwischentotal
var $panel = $el.closest('.panel');
var total = 0;

$panel.find('.result').each(function(){
total += parseFloat($(this).text());
});
var $tot = $panel.prev().find('.tot');
$tot.text(total);

//Gesamttotal
var gesamttotal = 0;
var $container = $el.closest('.container');
var $ausgabe = $container.find('.ausgabe');

$('.result').each(function(){
gesamttotal += parseFloat($(this).text());
});
$ausgabe.text(gesamttotal);
console.log(gesamttotal);
});
});

Er beinhaltet natürlich noch weitere Funktionen.

Antwort
von kingbongo, 27
$(document).ready(function(){ 
$('#z2s1, #z2s2').focusout(function(){
showResult('#z2s1', '#z2s2', '#resultz2 b');
});

//...

function showResult(sel1, sel2, selRes){
var result = parseInt($( sel1 ).val()) + parseInt($( sel2).val());
$( selRes ).empty().append(result);
}
});
Kommentar von Gastonn ,

Hallo Kingbongo. Ich habe nun den ganzen Code auch noch auf pastebin gestellt.

Antwort
von tDoni, 27

Erst einmal den Code bei z.B. http://pastebin.com/ ablegen und dann teilen. Dann kann man das auch lesen. 

Wenn der Code immer der selbe ist, gibt es sicher einen Weg, ihn in eine neue Funktion auszulagern. Evtl. die Zeilennummer als Paramter übergeben.

Kommentar von Gastonn ,

Danke, habe ich nun so gemacht.

Antwort
von mastema666, 29

Wenn die Berechnung die gleiche oder sehr ähnlich ist könnte das durchaus möglich sein, den Code kann man hier aber nicht wirklich lesen, sowas am besten nicht direkt bei GF posten sondern den Code bei pastebin oder so "auslagern", die können das besser mit der Formatierung ;)

Kommentar von Gastonn ,

Yep, habe ich nun auch endlich bemerkt und umgesetzt. Danke

Antwort
von RakonDark, 27

so unformatiert hat da keiner lust zu gucken

uploade das mal z.b. zu http://pastebin.com/

Kommentar von Gastonn ,

Danke für den Tipp, habe ich gemacht.

Keine passende Antwort gefunden?

Fragen Sie die Community