从选择器中排除 $(this) | CSS-Tricks

假设您想为页面上的每个链接附加一个点击处理程序。该点击处理程序的函数将所有其他链接更改为不同的颜色。

var $allLinks = $("a");

$allLinks.click(function() {

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

});

您可以使用 .not() 函数从集合中删除元素，因此填充this到该函数将删除当前元素，然后再更改颜色。

Ant

# 2010年5月16日

此方法的更好应用

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

Tem Corner

# 2010年12月14日

由于在一个页面上使用此脚本的链接很多，这意味着 jQuery 将操作每个元素并在 class-attributte 中执行操作，这可能会变得非常昂贵且缓慢。

更好的方法是使用一个通用的包装类。
这样，jQuery 只会触及当前链接和之前点击的链接。在较大的页面上速度更快、成本更低，并且通常是良好的实践。

body-class 部分不是强制性的，可以默认将链接设置为红色，只留下两个 css 规则和点击函数中的两行 javascript。

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' );
		}
	});
});

另请参阅 http://krinkle-tools.grizzdesign.nl/other-anchors.html

Tem Corner

评论的永久链接# 2010年12月14日

评论中缺少一部分，请参阅链接

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

获取正确的 javascript 和 css

评论

发表评论 取消回复

发表评论取消回复