QuerySelectorAll.forEach hilfe

05/10/2018 11:22 Cc_Cc_Cc#1
Tag,

ich wollte ein Counter einfügen für jede Box.

Ich habe z.b 5 Beiträge und jeder der Beiträge soll den Counter 0 haben.(Bzw für jedes Form-Feld soll 0 gesetzt werden.)

Ich habe hier mal 2 Beiträge:

form-list-1
Beitrag: Hallo
button

form-list-2
Beitrag: Hi
button

Wenn ich jetzt auf form-list-2 button klicke, soll er den Counter +2 nehmen und speichern. Wenn ich nochmal drauf klicke, ist der Counter ja auf 4. Wenn ich jetzt auf form-list-1 klicke, soll der Counter 2 sein.

Das Problem ist, wie definiere ich die Variable Counter für jedes form-Feld?

Das hab ich gefunden:

Jetzt wollte ich noch eine Function button_click schreiben, der so aussehen sollte:


HTML:

Er sagt mir aber das Counter nicht definiert ist.
05/11/2018 10:50 iMostLiked#2
Eine Methode, wie du dein Vorhaben umsetzen könntest:

Gib jeder Form noch ein zusätzliches Element (unsichtbares Input-Feld) und speichere dort den Count. Alternativ könntest du es noch mit einem Array lösen, aber die Variante ist wohl "einfacher".

HTML Code:
<form class="box-form">
    <button type="submit" class="btn">Counter</button>
    <input value="0" type="text" hidden>
</form>
Code:
$('.box-form button').click(function(){
    var nVal = parseInt($(this).next().val()) + 2;
    $(this).next().val(nVal);
});
Im Grunde genommen ist es ein Click-Event für jeden Button in einem Element mit der Klasse "box-form". Dort holt sich der Code mithilfe von [Only registered and activated users can see links. Click Here To Register...] die Value des Elementes "neben" dem Button und addiert eine Zahl drauf. Anschließend wird die Value im Input-Feld geändert.

PS: Nutz [Only registered and activated users can see links. Click Here To Register...]. Erleichtert dir dein Leben um einiges.
PPS: Hab den Code nicht getestet, müsste aber klappen. Das Prinzip sollte auf jeden Fall ersichtlich sein.
05/11/2018 12:44 type.#3
Wahrscheinlich ist deine Variable 'counter' tatsächlich einfach nicht definiert.
Habe das einfach mal kurz zusammengeworfen; macht doch eigentlich genau das, was es soll, wenn ich dich richtig verstanden habe? M.M.n. gibt es, sofern es lediglich um eine solch simple Aufgabe geht, keinen Grund die komplette jQuery-Lib zu laden. ¯\_(ツ)_/¯

[Only registered and activated users can see links. Click Here To Register...]
05/11/2018 16:18 Cc_Cc_Cc#4
Ich möchte die Variable Counter noch per POST weitergeben.

z.b

SELECT * FROM comments LIMIT $counter;

Das ich dann immer weitere anzeigen kann.

Wenn ich jetzt, wie ihr unten bei "data: .. " sieht, counter einfüge, sagt er mir dass Counter nicht definiert ist. Ich habe nach (document).ready.. den Code von type. geschrieben. Es müsste doch dann schon deklariert sein oder nicht?
05/11/2018 16:23 iMostLiked#5
Das liegt daran, dass du die Variable "counter" immer noch nicht definiert hast. (zumindest nicht global)
Wie auch immer, du kannst sie sowieso nicht übergeben, da in einer Variable nicht mehrere Werte reinpassen.

Wenn du für Block A einen Count von 44 hast und für Block B einen Count von 66, kann das nicht alles in "counter" addiert/gespeichert werden. (es sei denn du möchtest das)

Du musst dir den Count entweder über das Input-Feld (wenn du mein Beispiel nutzt) oder über das Span-Element (wenn du types Beispiel nutzt) holen.
05/11/2018 18:01 Cc_Cc_Cc#6
Quote:
Originally Posted by iMostLiked View Post
Das liegt daran, dass du die Variable "counter" immer noch nicht definiert hast. (zumindest nicht global)
Wie auch immer, du kannst sie sowieso nicht übergeben, da in einer Variable nicht mehrere Werte reinpassen.

Wenn du für Block A einen Count von 44 hast und für Block B einen Count von 66, kann das nicht alles in "counter" addiert/gespeichert werden. (es sei denn du möchtest das)

Du musst dir den Count entweder über das Input-Feld (wenn du mein Beispiel nutzt) oder über das Span-Element (wenn du types Beispiel nutzt) holen.
Hi,

ich hab es mal so versucht, doch er nimmt es immernoch nicht +2.
Es kommt auch keine Fehlermeldung.
HTML:

Java:
05/12/2018 12:10 iMostLiked#7
Ja, pass mal auf, du hast da bisschen was verwechselt und doppelt gemoppelt.

Du hast die .find() Funktion falsch genutzt. Wenn du in der Funktion selbst mit einem Punkt anfängst, selektierst du Klassen. (Mit einem Hashtag selektierst du IDs)

Dein
Code:
var change = $(this).find('.counter-'+value+'')
macht also keinen Sinn, da es keine Klasse, sondern ein name-Attribut ist. Selektieren musst du es so:
Code:
$(this).find('input[name="counter counter-'+value+'"]')
Das "input" brauchst du nicht. Kannst es alternativ auch so machen:
Code:
$(this).find('[name="counter counter-'+value+'"]')
Des Weiteren brauchst du das .next() nicht, da du als Haupt-Selektor (this) die Form und nicht den Button hast. Dadurch, dass du dich mit dem Selektor in der Form befindest, kannst du innerhalb dieser Form auf alles zugreifen, ohne .next() oder Ähnliches verwenden zu müssen.

Ansonsten war dein Ansatz ziemlich gut. Ich habe den Code für dich angepasst.
There you go: (Hab's mal in Spoiler gesetzt, falls du es noch selbst ausprobieren möchtest. :))


Ach so, setz mal bitte Semikolons ans Ende der Zeilen. :D

PS: Die <p>-Tags brauchst du gar nicht. Das Input Feld ist sowieso unsichtbar.
05/12/2018 14:34 Cc_Cc_Cc#8
Perfekt hat alles geklappt :D danke dir^^