Jquery 点击添加类？

每次单击h1时，我都想向div.color添加一个类

问题是，当我单击不同的h1时，我希望将不同的类添加到div.color

当我点击

变成

我该怎么做？我是jquery新手，所以这对我来说很难

<h1 data-class="blue">Blue</h1>
<h1 data-class="green">Green</h1>

<div class="color">I'm changing colour here.</div>

<script>
$('h1.color').on('click', function() {
    $(this).css({"background":"attr('data-class')"});
});
 </script>

jQuery提供addClass方法向元素添加类。 它还提供了一个数据函数来访问自定义数据属性。 裁判：

您还需要编写一些CSS来定义您希望添加的每个此类类的背景色。例如

<style type='text/css'>
    .blue {
        background-color: #0000ff;
    }
</style>

---

剩下的应该很简单。

首先，如果要选择所有h1元素，选择器应该是h1。如果您使用h1.color，那么您正试图找到具有css类颜色的h1元素，而您没有

如果您想向color div添加一个类，那么应该使用jQuerys

还值得注意的是，您可能应该将其全部打包，以确保在操作dom时dom已准备就绪：

<h1 data-class="blue">Blue</h1>
<h1 data-class="green">Green</h1>

<div class="color">I'm changing colour here.</div>

<script>
     $(function() {
       $('h1').on('click', function() {
          $(".color").addClass($(this).data("class"));
       });
    });
 </script>

试试这个

我添加了蓝色和绿色来检查这是否有效

$function{ $'h1.addClass'。单击，函数{ $'div.color'.removeClass'blue-green'.addClass$this.attr'data-class'； }; }; 蓝先生{ 颜色：00F； } 格林先生{ 颜色：0F0； } 蓝色 绿色

---

我在这里换颜色。我想这正是你所期待的。每次用户单击h1时，它都会删除以前的类并添加新类。下面是工作演示。我已经提醒了你一些想法。希望这对你有帮助

蓝色 绿色 红色 我在这里换颜色。 var myArray=[]；//创建一个空数组以保存用户单击的所有类名。 $h1.clickfunction{ var data_class_name=$this.attr'data-class'；//获取单击的h1的类名 myArray.pushdata_class_name；//将该类名放入数组中 alertmyArray；//打印数组，然后可以看到最后添加的内容。 如果myArray.length>1//请检查数组的长度，如果该长度大于1，则从数组末尾删除第二个元素，因为每当用户单击新的数组时，它都是上一个类。 { var getthelasteElement=myArray[myArray.length-2]； alertgetthelastElement； $div.color.RemoveClassGetTheLasteElement；//删除以前的类 $div.color.addClassdata\u class\u name；//添加新类 var div_added_class_name=$div.color.attr'class'；//获取div的当前类。 alertdiv类名为：-->+div_added_class_name；//从alert打印它以了解情况。 } else//如果数组长度小于1，则没有要删除的类。因此，只需添加当前类即可。 { $div.color.addClassdata\u class\u name； var div_added_class_name=$div.color.attr'class'； alertdiv类名为：-->+div\u添加的\u类名； } }; 试试这个

var divToAddClass=$divcolor； $'h1'。单击函数{ var color=$this.attr'data-class'； divToAddClass.removeAttr'class'。addClass'color'+color； }; 蓝色 绿色

---

我在这里改变颜色。别忘了用$function{…}包装@浮石谢谢，added@Esko此代码将在每个h1元素单击div.color元素后添加两个类。是否正确？是的，如果同时单击两个h1元素，则div将同时具有蓝色和绿色css类。如果只需要最后一个，可以执行$.color.removeClass.addClasscolor.addClass$this.dataclass；如果有两个以上的类，我的意思是我们必须删除所有的类。如果有100个呢？。如果我们不知道类名怎么办？@AnuradhS在h1上单击我们不需要担心其他类。我的意思是，当你单击h1时，你会删除所有可用类，然后再添加新类。我想问的是，如果有两个以上的类，如蓝色、绿色、红色、橙色、黄色、紫色等，那么您必须删除所有这些类。@AnuradhS我们可以这样做，不能说我们是否从应该在elementdiv.color上的代码的其他部分添加了其他类，任何新类都将添加到elementdiv.color；是的，任何新类都将添加到元素中，如果用户在同一元素上单击两次，那么您必须首先删除，就像您在代码中所做的那样。欢迎使用StackOverflow Vera！它的工作原理是，你应该在问完问题后接受最好的答案。。下面有一些很好的选择。