更容易的方法只更改某个类的一个元素

我想更改某个类的选定元素的样式属性。我有五个h6元素，如果用户点击其中一个元素，所选元素的样式会改变，其他元素会转换默认样式。例如，更容易的方法只更改某个类的一个元素

$(".change").bind("click",function(){ 
    $(".change").css("color","white"); 
     $(this).css("color","red"); 
    });

这些代码更改类的所有成员的颜色并最后更改所选元素的颜色。我想要的就是这样，只改变选定的一个。但是，这不是一个好方法，因为更改style属性的其他属性需要有关默认属性的知识。例如，我不得不发现我的背景颜色是＃D4D4D4。是否有任何简单的方法来改变一个类的选定元素，就像css的“悬停”一样？

2011-09-07 user893970

我不是100％肯定，我知道你要问什么，但如果你的问题”重新尝试解决的是，您不希望将CSS状态编码到JavaScript中，那么您应该向对象中添加/删除类，并让所有样式位于CSS中（它所属的位置）：

$(".change").click(function(){ 
    $(".change").removeClass("selected"); 
    $(this).addClass("selected"); 
});

然后，只需为选定的类创建一个CSS规则，其他所有项目都将具有正常的默认样式。

.selected {color: red;}

2011-09-07 23:30:06 jfriend00

通过缓存查询结果可以避免在每次点击时对''.change''做选择器查询：'var x = $（'。change'）;'。 –

是的，这个值可以被缓存，但它不可能在像点击这样的用户事件上产生显着的性能差异。如果存在明显的原因，我认为只有持久存储东西才更好，因为存在一些存储DOM引用的问题。 – jfriend00

而不是在html元素中使用css，您可以切换或从h6元素中添加/删除css类。

2011-09-07 23:28:52

考虑一下：

CSS：

h6.selected { color:white; }

的JavaScript：

var h6arr = $('h6').get(); 

$(h6arr).click(function() { 
    $(h6arr).removeClass('selected'); 
    $(this).addClass('selected'); 
});

2011-09-07 23:29:58

回答