JavaScript Richtiges Attribut aus Liste fischen

CitroenDsVier · 26. August 2016

Hallo nochmal,

entschuldigung, wenn die Überschrift nicht ganz passt. Ich weiß nicht, wie man das besser zusammenfassen kann

ich habe eine Liste an links aus der selben Klasse, die über eine php-Schleife erzeugt werden. Jeder link triggert die selbe JS-Funktion, jeder Link hat aber ein anderes Ziel.
Ich möchte jetzt in js den Wert des Custom Attributes 'data-filename' von genau DEM Link erhalten, der die Funktion getriggert hat. Das Attribut haben sie nämlich alle.

Kurzes Beispiel:

HTML:

<a href="1.html" class="link" onClick="jsFunction()" data-filename="Hans.jpg" />
<a href="2.html" class="link" onClick="jsFunction()" data-filename="Marie.jpg" />
<a href="3.html" class="link" onClick="jsFunction()" data-filename="Jürgen.jpg" />
...

wie kann ich in der js Function den Wert von data-filename vom richtigen Link erhalten?

Code:

$filename = $('.link').attr('data-filename');

liefert immer den Hans. logisch.

MfG, V40

Ciraxis · 26. August 2016

this ist das zauberwort ;-)
Und ich würde den clickhandler lieber außerhalb und nicht inline definieren

blablub1212 · 26. August 2016

Zu langsam, aber ja du greifst mit this darauf zu

Code:

<html>

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js" charset="utf-8"></script>
</head>

<body>

  <a href="#" class="link" data-filename="Hans.jpg">1</a>
  <a href="#" class="link" data-filename="Marie.jpg">2</a>
  <a href="#" class="link" data-filename="Jürgen.jpg">3</a>

  <script>
    $(".link").click(function() {
      var filename = $(this).attr("data-filename");
      alert(filename);
    });
  </script>

</body>
</html>

CitroenDsVier · 26. August 2016

mit this (also dem: )

Code:

var filename = $(this).attr("data-filename");

ist filename trotzdem undefined. Ein Blick in die Developertools von Firefox zeigt mir aber, dass im Attribut des HTML-Tags was drinnen steht.

Wie würde man das nicht inline triggern? Habe leider wenig Ahnung von js/jquery...

Defender1st · 26. August 2016

Im Grunde hat blablub1212 schon alles gesagt.
Ich hab mir erlaubt sein Codebeispiel mal in nen jsfiddle zu werfen - da kannst du schauen, wie das aussieht:

https://jsfiddle.net/cdo3j0uf/

Wie würde man das nicht inline triggern?

$(".link").click(function(){

});

So. Im Endeffekt legst du damit diese Funktion auf alle Elemente in deinem Quellcode, die die CSS-Klasse 'link' haben.

Edit:

Wenn du es unbedingt komplett ohne jQuery machen willst könnte das so aussehen:

https://jsfiddle.net/cdo3j0uf/2/

CitroenDsVier · 26. August 2016

@Defender1st: alles klar, ich erinnere mich wieder.

Trotzdem bleibt der filename undefined...

Defender1st · 26. August 2016

Kann eigentlich nicht

Poste bitte noch einmal dein aktuelles Javascript + Html

John Reese · 26. August 2016

Dann machst du was falsch. Im JSFiddle geht ja alles...

Wie hast du das denn jetzt eingebaut?

CitroenDsVier · 26. August 2016

PHP:

foreach($files as $file) {
	if ($i > 2) { // "." und ".." 'Dateien' überspringen und mit erster 'echter' Datei anfangen
		$filetype = filetype("uploaded_files/$file");
		
		$filesize = filesize("uploaded_files/$file");
		$filesizeEinheit = "";
		if($filesize < 1000) {
			$filesizeEinheit = "Bytes";
		} else if($filesize > 999 && $filesize < 1000000) {
			$filesizeEinheit = "KB";
			$filesize = $filesize / 1000;
		} else if($filesize > 999999 && $filesize < 1000000000) {
			$filesizeEinheit = "MB";
			$filesize = $filesize / 1000;
			$filesize = $filesize / 1000;
		}				
		$filesize = round($filesize, 1);
		$filesize = str_replace('.', ',', $filesize);
		
		$change_date = date ("j.n.y H:i:s", filemtime("uploaded_files/$file"));
?>
		<div class="file-explorer-file-container<?php if($g == 1) { echo " grey"; $g = 0; } else { echo " white"; $g = 1; }?>">
			<div class="file-explorer-file filename"><?php echo $file." ".$filetype; ?></div>
			<div class="file-explorer-file filesize"><?php echo "$filesize $filesizeEinheit"; ?></div>
			<div class="file-explorer-file lastChange"><?php echo $change_date; ?></div>
			<a class="jsTrigger" data-filename="<?php echo $file; ?>"><div class="file-explorer-file delete-button" title="Diese Datei löschen"></div></a>
		</div><?php
	}
	$i++;
}

dort werden die etlichen Elemente erzeugt.

und hier ist js:

Code:

$(".jsTrigger").click(function() {
	$('#delete-confirmation-overlay').fadeIn(100);
	var filename = $(this).attr("data-filename");
	
	$('#delete-confirmation-popup-no').before('<a id="yes-a" href="content/actionphps/delete-file.php?file=' + filename + '\"><button id="delete-confirmation-popup-yes">Ja</button></a>');
	$('#yes-a').before('<p id="filename">' + filename + '</p>');
});

Ergänzung (26. August 2016)

das ist ja mal kacke formatiert...

Defender1st · 26. August 2016

Hmmm, Gefühlt 100 Jahre kein php mehr gemacht

.
Steht denn im 'fertigen' Html code im data-filename Attribut überhaupt das drin?

Oder noch besser: hast du überhaupt jQuery eingebunden?^^

Code:

<head>
  <script src="https://code.jquery.com/jquery-3.1.0.js" charset="utf-8"></script>
</head>

CitroenDsVier · 26. August 2016

Defender1st schrieb:
Steht denn im 'fertigen' Html code im data-filename Attribut überhaupt das drin?

Jap. Zeile 26 aus dem php-Code ist eigentlich die Entscheidende.

Defender1st · 26. August 2016

Naja, ich weiß ja nicht, was in $file drin steht - vielleicht isses ja leer

CitroenDsVier · 26. August 2016

Ja, jQuery habe ich auch eingebunden. Aber nicht deine Version, sondern "1.11.3.min"... hat das was zu sagen?

Ergänzung (26. August 2016)

Nein $file ist nicht leer, das Attribut im "fertigen" html ist ja gefüllt. Ich glaube das Ganze wird nur verkompliziert, je mehr Code ich hochlade.

Ergänzung (26. August 2016)

Ich glaube ja, dass in "this" nicht das richtige Element steckt... Nur reichen meine js-Kenntnisse nicht aus, um das zu überprüfen.

Defender1st · 26. August 2016

Nungut.

1) Du benutzt ne ältere jQuery Version - sollte in dem Fall aber kein Problem machen.

2) Die Click Funktion wird ausgeführt - korrekt?
Nen alert("Hallo") am Anfang der Funktion wird ausgegeben, sobald du auf einen Link klickst?

3) Nen alert($(this).attr("data-filename")); gibt undefined aus?

4) Nen alert($(this).attr("class")); gibt jsTrigger aus?

blablub1212 · 26. August 2016

Im Zweifel kannst du auch einfach mal ein console.log(this) in deine Funktion schreiben und dann schauen, was in deinem this drinsteht.

CitroenDsVier · 26. August 2016

Ich hab noch ein wenig rumprobiert, jetzt läufts. Ich kann leider nicht sagen, worans lag. Habe zu viele Sachen gleichzeitig ausprobiert

Vielen Dank Euch! Ohne Euch hätt ich das nicht geschafft..

Suche

JavaScript Richtiges Attribut aus Liste fischen

CitroenDsVier

Lt. Commander

Ciraxis

Lieutenant

blablub1212

Rear Admiral

CitroenDsVier

Lt. Commander

Defender1st

Lt. Junior Grade

CitroenDsVier

Lt. Commander

Defender1st

Lt. Junior Grade

John Reese

Lt. Commander

CitroenDsVier

Lt. Commander

Defender1st

Lt. Junior Grade

CitroenDsVier

Lt. Commander

Defender1st

Lt. Junior Grade

CitroenDsVier

Lt. Commander

Defender1st

Lt. Junior Grade

blablub1212

Rear Admiral

CitroenDsVier

Lt. Commander

Ähnliche Themen