div array o.ä. in JS-function bearbeiten

[ralphi]

Hi Leute,

wieder mal ne Anfängerfrage.

Also ich habe div's mit songs. Mit einem Button löschen, möchte ich ein panel (also weiteres div) mit dem einem tag <p> mit genau dem songnamen vom aktuellen (löschen geklickten) song anzeigen.

echo"<li class='lieder ui-widget-content ui-corner-tr'>\n";  
	echo"<h5 id='songname' class='ui-widget-header'>" . $name . "</h5>\n";  
	echo"<img src='img_min/" . $name2 . ".jpg' alt='" . $name . "' width='100' height='100' />\n";  
	echo"<a href='" . $name2 . ".mp3' title='Zum Download: rechte Maustaste - Link speichern unter!!' class='ui-icon ui-icon-arrow'></a>\n";  
	echo"<a  title=\"Play song\" onclick=\" spiele ('" . $song . "', '" . $cover . "'); \"class=\"ui-icon ui-icon-play\"></a>\n";  
	echo"<span id='loeschen_click' title='Del' class='ui-icon ui-icon-close'></span>\n";  
echo"</li>\n";  
echo"\n";  
$i++;

Jetzt hab ich versucht, das ganze mit arrays zuzuordnen,

echo"<li class='lieder ui-widget-content ui-corner-tr'>\n";  
	echo"<h5 id='songname[" . $i . "]' class='ui-widget-header'>" . $name . "</h5>\n";  
	echo"<img src='img_min/" . $name2 . ".jpg' alt='" . $name . "' width='100' height='100' />\n";  
	echo"<a href='" . $name2 . ".mp3' title='Zum Download: rechte Maustaste - Link speichern unter!!' class='ui-icon ui-icon-arrow'></a>\n";  
	echo"<a  title=\"Play song\" onclick=\" spiele ('" . $song . "', '" . $cover . "'); \"class=\"ui-icon ui-icon-play\"></a>\n";  
	echo"<span id='loeschen_click[" . $i . "]' title='Del' class='ui-icon ui-icon-close'></span>\n";  
echo"</li>\n";  
echo"\n";  
$i++;

hab nur keine Ahnung, wie ich das in die Funktion einbaue und ob's so gehen könnte.

$("#loeschen_click").click(function(){  
	$("#loeschen p").text($("#songname").text());  
	//$("#loeschen").trigger();  
});

normalerwweise verwendet man this - denk ich.
Nur this bezieht sich ja auf  id='loeschen_click'.

Wie löst man das richtig?
ralphi

PS: heute ist letzter Tag der LAHO (alle 4 Jahre). War dieses Jahr schon jemand da?

[M.]

Wie löst man das richtig?

Zuerst wäre sinnvoll, wenn du HTML postest, nicht PHP, denn von PHP hat der Browser keinen Schimmer.

PS: heute ist letzter Tag der LAHO (alle 4 Jahre). War dieses Jahr schon jemand da?

Kenn ich nicht, also nein ;)

[ralphi]

Zuerst wäre sinnvoll, wenn du HTML postest, nicht PHP, denn von PHP hat der Browser keinen Schimmer.

hab mich beim markieren vertutelt ;-(

jetzt hab ich mir gedacht - nimmst halt den tooltip als referenz
geht auch nicht!

$("#loeschen_click").click(function(){  
	//alert($( this ).attr("title"));  
	alert($( this ).title());  
});

mit
echo"<span id='loeschen_click' title='" . $name . "' class='ui-icon ui-icon-close'></span>\n";

wie löst du sowas?

[M.]

hab mich beim markieren vertutelt ;-(

Und wo ist der HTML-Code?

echo"<span id='loeschen_click' title='" . $name . "' class='ui-icon ui-icon-close'></span>\n";

Das ist wieder PHP, hab dir schon geschrieben, davon hat der Browser keinen Schimmer

wie löst du sowas?

Sobald du mir den HTML-Code zeigst und damit dein Problem nachvollziehbar ist, kann ich dazu was sagen.

[ralphi]

Sobald du mir den HTML-Code zeigst und damit dein Problem nachvollziehbar ist, kann ich dazu was sagen.

auszug Quelltext:

<li class='lieder ui-widget-content ui-corner-tr'>  
<h5 id='songname' class='ui-widget-header'>10CC - Good morning judge</h5>  
<img src='img_min/10CC - Good morning judge.jpg' alt='10CC - Good morning judge' width='100' height='100' />  
<a href='10CC - Good morning judge.mp3' title='Zum Download: rechte Maustaste - Link speichern unter!!' class='ui-icon ui-icon-arrow'></a>  
<a  title="Play song" onclick=" spiele ('10CC - Good morning judge.mp3', 'images/10CC - Good morning judge.jpg'); "class="ui-icon ui-icon-play"></a>  
<span id='loeschen_click' title='10CC - Good morning judge' class='ui-icon ui-icon-close'></span>  
</li>  
  
<li class='lieder ui-widget-content ui-corner-tr'>  
<h5 id='songname' class='ui-widget-header'>2-4 Grooves feat. Reki D. - Relax (Original Club Mix)</h5>  
<img src='img_min/2-4 Grooves feat. Reki D. - Relax (Original Club Mix).jpg' alt='2-4 Grooves feat. Reki D. - Relax (Original Club Mix)' width='100' height='100' />  
<a href='2-4 Grooves feat. Reki D. - Relax (Original Club Mix).mp3' title='Zum Download: rechte Maustaste - Link speichern unter!!' class='ui-icon ui-icon-arrow'></a>  
<a  title="Play song" onclick=" spiele ('2-4 Grooves feat. Reki D. - Relax (Original Club Mix).mp3', 'images/2-4 Grooves feat. Reki D. - Relax (Original Club Mix).jpg'); "class="ui-icon ui-icon-play"></a>  
<span id='loeschen_click' title='2-4 Grooves feat. Reki D. - Relax (Original Club Mix)' class='ui-icon ui-icon-close'></span>  
</li>

usw.

Die JS - funktion in der ready (nach dokument laden) function
~~~javascript $("#loeschen_click").click(function(){
//alert("hallo");

			//alert($( this ).attr("title"));  
			alert($( this ).title());  
			  
			//$("#loeschen").trigger();  

	});

  
Das panel Div  
~~~html
<div data-theme="b" id="loeschen" data-role="panel" data-position="right" data-display="overlay">  
  
		<h1>Reinigen der Musiksammlung</h1>  
  
		<h3>bitte mithelfen ;-)</h3>  
		<h2>L&ouml;schen des Songs, wenn:</h2>  
		<h3>- zuviel Radiomoderator</h3>  
		<h3>- abgeschnitten</h3>  
		<h3>- St&ouml;rungen (schlechte Qualit&auml;t)</h3>  
  
		<h2>Song:</h2>  
		<p>irgendwo ist ein Fehler aufgetreten. Bitte Info an mich</p>  
  
		<a href="#" data-role="button" data-inline="true">jetzt l&ouml;schen!</a>  
  
  
</div><!-- /panel-->

[M.]

Vielleicht würde es klappen, wenn du jede ID nur einmal vergibst, wie es auch im Validator angemängelt werden würde.

Solange der QUellcode nicht fehlerfrei ist, ist jede weitere ANalyse witzlos ;)

[ralphi]

Vielleicht würde es klappen, wenn du jede ID nur einmal vergibst, wie es auch im Validator angemängelt werden würde.

stimmt schon - id nur einmalig

was kann ich stattdessen nehmen?
class hab ich ausprobiert 'loesch' -> $(".loech").click ..
funzt nicht
hab ich die möglichkeit eines arrays mit id's?

[molily]

Hallo,

echo"<span id='loeschen_click' title='Del' class='ui-icon ui-icon-close'></span>\n";

IDs sind dokumentweit eindeutig, d.h. du kannst nicht mehreren Elementen in einer Schleife dieselbe ID geben. Arbeite hier mit Klassen.

Du kannst hier zwar wie vorgeschlagen eindeutige IDs mit fortlaufenden Nummern generieren. Aber Logik muss so allgemein sein, dass sie unabhängig von konkreten IDs funktioniert. IDs/Nummern zur Zuordnung der Daten sind nicht nötig. Sie sind ja bereits durch das DOM gruppiert:

<li>  
  <h2>Diese Daten will ich auslesen</h2>  
  <button>Von diesem Button gehe ich aus</button>  
</li>

hab nur keine Ahnung, wie ich das in die Funktion einbaue und ob's so gehen könnte.

jQuery bietet Funktionen, um sich im DOM-Baum zu bewegen (DOM-Traversal). Ausgehend von dem geklickten Button hangelst du dich nach oben und suchst dann das zugehörige Element, das die benötigten Informationen enthält.

Beispiel: http://jsfiddle.net/molily/c8tNS/

Bei der Gelegenheit ist es auch sinnvoll, das click-Ereignis an einem gemeinsamen Elternelement abzufangen, anstatt bei jedem Button einzeln (Event Delegation). Dazu gibt es in jQuery die on-Methode mit drei Parametern:

$(document).on('click', '.löschen-button', löschen);

Das überwacht alle Klicks auf Elemente der Klasse »löschen-button« beim obersten document-Knoten. »löschen« ist die Variable, in der die Handler-Funktion gespeichert ist.

Im Event-Handler:

var title = $(event.currentTarget).closest('li').find('h2').text();

$(event.currentTarget) greift auf das geklickte Element zu (siehe currentTarget) und liefert ein jQuery-Objekt.

Davon ausgehend suchst du das nächste Elternelement vom Typ p (siehe closest) und suchst in den Kindelementen nach einem h2-Element (siehe find). Darin steckt die gewünschte Information.

Es ginge auch einfacher, je nachdem, wie der DOM-Baum aussieht. Z.B. mit siblings, wenn die beteiligten Elemente Geschwister sind. Aber es ist sinnvoll, diese Logik eher flexibel zu halten, damit das DOM änderbar ist. (In dem Zusammenhang könnte man auch auf Typselektoren verzichten und mit aussagekräftigen Klassen arbeiten.)

Die nächste Zeile kopiert den Titel in den Overlay zur Bestätigung und blendet den Overlay ein:

$('#löschen-overlay').find('.title').text(title).end().removeClass('hidden');

Hier ist nur end() neu, was einem das Ergebnis der vorherigen Suchoperation zurückgibt, hier $('#löschen-overlay'). Das ist fortgeschrittene Verkettung (Chaining) von jQuery-Methodenaufrufen, so kann man sehr effektiven Code schreiben.

Man kann auch ausführlicher schreiben:

var overlay = $('#löschen-overlay');  
overlay.find('.title').text(title).end();  
overlay.removeClass('hidden');

Grüße,
Mathias

[ralphi]

vielen dank für die lange erklährung :-)

sind noch ziemlich viele unbekannte für mich zum nachlesen ;-)

so adhoc hab ich folgendes probiert

$(document).on('click', '.loesche', function(){  
	alert($(event.currentTarget).closest('span').find('title').text());  
});

die id's rausgeworfen und dem button die class=loesche gegeben
im title ist nach wie vor der name den ich brauche

das alert kommt zwar - ist aber leer :-(

hast du eine schnellkorrektur für mich? einlesen und durchwursteln in  event.currentTarget und weitere angaben von dir, mache ich erst am montag

[molily]

Hallo,

so adhoc hab ich folgendes probiert

Nicht einfach irgendetwas probieren. Schau dir mein Beispiel einmal genau an. HTML-Elemenstruktur und JavaScript, das sich in diesem DOM-Baum bewegt, müssen aufeinander passen.

$(document).on('click', '.loesche', function(){

alert($(event.currentTarget).closest('span').find('title').text());
});

  
Deine hier gepostete HTML-Struktur sieht so aus:  
  
~~~html
<li>  
<h5>10CC - Good morning judge</h5>  
… noch andere Elemente auf gleicher Ebene …  
<span class='loesche'>Löschen</span>  
</li>

Wie kommst du nun vom Löschen-Button zum h5-Element?

Entweder über [link:http://api.jquery.com/siblings/@title=siblings]('h5') – d.h. direkt die Geschwisterelemente nach h5 durchsuchen.

Oder über closest('li').find('h5') - d.h. zum gemeinsamen Elternelement li aufsteigen und in den Kindelementen nach h5 suchen.

Wie gesagt, closest() sucht nach einem Elternelement, auf das der angegebene Selektor zutrifft. closest('span') ergibt in Anbetracht dieser DOM-Struktur keinen Sinn, eher closest('li'). Weil li das gemeinsame Elternelement ist.

Und find()[code] sucht nach Kindelementen (genauer Nachfahrenelementen), auf die der angegebene Selektor zutrifft. [code]'title' ist zwar ein gültiger Selektor, aber es gibt hier kein title-Element. Das gibt es nur einmal im Dokument, nämlich im head und nicht in diesem Teil des Baumes.

hast du eine schnellkorrektur für mich? einlesen und durchwursteln in  event.currentTarget und weitere angaben von dir, mache ich erst am montag

Dann wurstel dich bitte erst ein, sonst ist es leider nicht sinnvoll, noch weitere Beispiele zu geben, die du ohne tieferes Verständnis umbaust.

Grüße,
Mathias

[ralphi]

Entweder über siblings('h5') – d.h. direkt die Geschwisterelemente nach h5 durchsuchen.

die beispiele zeigen nur: die elemente einer klasse oder alle anderen zu markieren/bearbeiten !?

Oder über closest('li').find('h5') - d.h. zum gemeinsamen Elternelement li aufsteigen und in den Kindelementen nach h5 suchen.

alert($(event.currentTarget).closest('li').find('h5').text());

bringt auch ein leeres alert

Und find()[code] sucht nach Kindelementen (genauer Nachfahrenelementen), auf die der angegebene Selektor zutrifft. [code]'title' ist zwar ein gültiger Selektor, aber es gibt hier kein title-Element. Das gibt es nur einmal im Dokument, nämlich im head und nicht in diesem Teil des Baumes.

echo"<span id='loeschen_click' title='" . $name . "' class='ui-icon ui-icon-close'></span>\n";

mit dem 'tooltip' title hab ich (etwas später im threat geschrieben) es auch schon versucht.

vielleicht muss ich ja die leerzeichen im songnamen maskieren?

[molily]

Hallo!

alert($(event.currentTarget).closest('li').find('h5').text());

bringt auch ein leeres alert

Dann finde heraus, wo der Fehler liegt.

• Schau dir den Wert von event.currentTarget an und prüfe, ob er stimmt
• Schau dir den Wert von $(event.currentTarget).closest('li') an. (Es ist auf jeden Fall ein jQuery-Objekt, es kann aber leer sein und keine Elemente enthalten.)
• Schau dir den Wert von $(event.currentTarget).closest('li').find('h5') an (dito)

Das Überprüfen von Werten ist eine klassische Debugging-Technik. alert() ist schon eine ganz guter Anfang. Vielseitig sind die JavaScript-Fehlerkonsolen von Firebug oder dem Chrome Web Inspector. Mit console.log() lassen sich Werte auf der Konsole ausgeben. Objekte kann man darin interaktiv untersuchen.

echo"<span id='loeschen_click' title='" . $name . "' class='ui-icon ui-icon-close'></span>\n";

mit dem 'tooltip' title hab ich (etwas später im threat geschrieben) es auch schon versucht.

Mit attr('title') kannst du das title-Attribut lesen, das war schon ganz richtig. Hat das nicht geklappt?

Kurz zur Erklärung: Hier handelt es sich um zwei unterschiedliche Ansätze. Wenn du den Titel in einem title-Attribut beim Button unterbringst, kannst du ihn natürlich einfacher auslesen. Wenn du ihn nur einmal in der Überschrift unterbringst, muss du dich erst dahinhangeln, dafür steht er nicht mehrfach im HTML.

vielleicht muss ich ja die leerzeichen im songnamen maskieren?

Leerzeichen sind kein Problem, allerdings können andere Zeichen im Titel vorkommen, die maskiert (escaped) werden müssen, wenn man sie in ein HTML-Attribut schreibt. Das geht in PHP z.B. mit der Funktion htmlspecialchars. Aber das nur am Rande, das ist ein Thema für sich.

Grüße,
Mathias

[ralphi]

Hi,

mit try und error und deiner hilfe:

$(document).on('click', '.loesche', function(){  
		alert( $(this ).closest('li').find('h5').text());  
});

klappts :-)

vielleicht hab ich irgendwas vergessen zu erwähnen, warum es mit
event.currentTarget immer leer ist

Das Überprüfen von Werten ist eine klassische Debugging-Technik. alert() ist schon eine ganz guter Anfang. Vielseitig sind die JavaScript-Fehlerkonsolen von Firebug oder dem Chrome Web Inspector. Mit console.log() lassen sich Werte auf der Konsole ausgeben. Objekte kann man darin interaktiv untersuchen.

die debugger geschichten schau ich mir auf jedem fall mal an

Leerzeichen sind kein Problem,

hab ich auch gedacht. sonderzeichen maskier ich mit addslashes() - später fürs zippen auf dem NAS (Unix) maskier ich auch noch die leerzeichen

sag mal unterrichtest du auch?
hast eine engels-geduld beim erklären ;-)