$(this) vom Selektor ausschließen

Nehmen wir an, Sie möchten für jeden Link auf einer Seite einen Klick-Handler anbringen. Die Funktion für diesen Klick-Handler färbt dann *alle anderen* Links in einer anderen Farbe.

var $allLinks = $("a");

$allLinks.click(function() {

     $allLinks.not(this).css("color", "red");

});

Sie können die .not()-Funktion verwenden, um Elemente aus einer Menge zu entfernen, daher entfernt das Auffüllendiesenan diese Funktion das aktuelle Element, bevor die Farbe geändert wird.

Kommentare

Ant

# 16. Mai 2010

Bessere Anwendung dafür

var allLinks = $("a");
	
allLinks.click(function() {
	allLinks
		.removeClass('red')
		.not(this)
		.addClass('red');
});

Antworten

Tem Corner

# 14. Dezember 2010

Da eine Menge Links auf einer Seite mit diesem Skript dazu führt, dass jQuery jedes der Elemente manipuliert und Dinge im Klassenattribut tut, kann dies ziemlich teuer und langsam werden.

Ein besserer Weg wäre die Verwendung einer gemeinsamen Wrapper-Klasse.
Auf diese Weise berührt jQuery nur den aktuellen Link und die zuvor angeklickten. Deutlich schneller und günstiger auf größeren Seiten und generell gute Praxis.

Der body-class-Teil ist nicht zwingend erforderlich, die Links könnten standardmäßig rot gefärbt werden, sodass nur zwei CSS-Regeln und zwei Zeilen JavaScript innerhalb der Click-Funktion übrig bleiben.

jQuery(function(){

	// Only do the body class once
	var bodyIsClassed = false;
	
	// Instead of binding handlers to all anchor-tags, watch live()
	$( 'a' ).live( 'click', function(e){
		e.preventDefault();

		$( '.clicked' ).removeClass( 'clicked' );
		$( this ).addClass('clicked');
		if ( !bodyIsClassed ) {
			$( 'body' ).addClass( 'highlight-anchors' );
		}
	});
});

Siehe auch http://krinkle-tools.grizzdesign.nl/other-anchors.html

Antworten

Tem Corner

Permalink zum Kommentar# 14. Dezember 2010

Ein Teil des Kommentars ist verloren gegangen, siehe den Link

http://krinkle-tools.grizzdesign.nl/other-anchors.html

Für das korrekte JavaScript und CSS

Kommentare

Schreibe eine Antwort Antwort abbrechen