jQuery .data() in Array verwenden funktioniert nicht

[Jan-Frederik Stieler]

Hallo,
ich habe ein Script für die Filterfunktion von Isotope angepasst so das ich für die Filterfunktion multiple Links verwenden kann.
Nun würde ich hier aber gerne die HTML5 Data-Funktion verwenden

<ul id="filters" class="btn-group option-set clearfix" data-option-key="filter">
<li><a href="#filter" data-option-value="*" id="*" class="btn">show all</a></li>
<li><a href="#filter" data-option-value=".metal" id=".metal" class="btn">metal</a></li>
<li><a href="#filter" data-option-value=".transition" id=".transition" class="btn">transition</a></li>
<li><a href="#filter" data-option-value=".post-transition" id=".post-transition" class="btn">post-transition</a></li>
<li><a href="#filter" data-option-value=".nonmetal" id=".nonmetal" class="btn">nonmetal</a></li>
<li><a href="#filter" data-option-value=".inner-transition" id=".inner-transition" class="btn">inner-transition</a></li>
<li><a href="#filter" data-option-value=".alkali, .alkaline-earth" id=".alkali, .alkaline-earth" class="btn">alkali and alkaline-earth</a></li>
<li><a href="#filter" data-option-value=":not(.transition)" id=":not(.transition)" class="btn">not transition</a></li>
<li><a href="#filter" data-option-value=".metal:not(.transition)" id=".metal:not(.transition)" class="btn">metal but not transition</a></li>
</ul>

…
$filterLinks.click(function(){
   
	var $this = $(this),
	$optionSet = $this.parents('.option-set');
			
	$this.toggleClass('selected');
    	
	var filters = [];
	// get checked checkboxes values
	$filterLinks.filter('.selected').each(function(){
		filters.push( this.id );
	});
	filters = filters.join(', ');
	$container.isotope({ filter: filters });
	console.log(filters);
});

Genau geht es um

$filterLinks.filter('.selected').each(function(){
	filters.push( this.id );
});

Hier würde ich gerne das Attribut data-option-value anstatt der id verwenden. Leider funktioniert sowas

filters.push( this.data('optionValue') );

nicht, da ich für .data() ja ein jQuery Objekt benötige. Wenn ich nun

filters.push( $this.data('optionValue') );

verwende bekomm ich zwar keine Fehlermeldung mehr, aber das ausgegebene Array ist falsch.

Es wäre super wenn mir jemand helfen könnte?

Viele Grüße

 

[Parantatatam]

Ich vermute, dass du hier ein Referenzierungsproblem hast, denn du definierst $this außerhalb des Blocks, weshalb du stets auf $filterLinks verweist und nicht auf das Element, welches gerade im Block verwendet wird. Daher müsste die Lösung für dein Problem wie folgt aussehen:

$filterLinks.filter( ".selected" ).each(function() {
  filters.push( $( this ).data( "option-value" ) );
});

 

[Jan-Frederik Stieler]

Hi,
ok. Ich dachte das diese variable innerhalb der Funktion auch für Funktionen gültig wäre welche sich in dieser befinden. Danke es scheint jetzt richtig zu funktionieren.

Viele Grüße

 

[Parantatatam]

Warum sollte sie? Du könntest diese Variable auch $weiswurst nennen. Nur weil sie beispielsweise in PHP eine besondere Bedeutung hat, gilt dies nicht automatisch auch für JavaScript. Insofern musst du diese auch schön selber dort definieren, wo du sie brauchst.

 

[Jan-Frederik Stieler]

Hi,
ich hab das jetzt nicht mit der PHP-Variablen $this verwechselt.
Ich habe direkt in der Click Funktion die Variable $this deklariert

var $this = $(this),

Und ich dachte nun das sie als lokale Variable innerhalb dieser Funktion auch für verschachtelte Funktionen gültig wäre.

Viele Grüße

 

[Parantatatam]

Das habe ich schon verstanden, aber ich wollte nur daraufhin weisen, dass dies logischerweise nicht sein kann, da in JavaScript $this eine Variable wie jede andere ist und somit jQuery auch nicht wissen kann, wie du deine Variable nennst. Insofern kann dieser Variablen auch innerhalb eines Blockes nicht ein spezieller Wert zugewiesen werden.