更简单的方法只能更改某个类的一个元素

Question

我想更改某个类的所选元素的样式属性。我有五个h6元素，如果用户单击其中一个元素，则所选元素的样式会更改，而其他元素会变为默认样式。例如，

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

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

Answer 1

我不是100％确定我知道你在问什么，但如果你想解决的问题是你不想将CSS状态编码到你的javascript中，那么你应该添加/删除对象的类，让所有样式都在CSS中（它所属的位置）：

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

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

.selected {color: red;}

Answer 2

考虑一下：

CSS：

h6.selected { color:white; }

JavaScript的：

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

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

Answer 3

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