我想在每次点击h1时向div.color添加一个类。点击添加班级？
问题是我想要一个不同的类被添加到div.color当我点击一个不同的h1。
当我点击<h1 data-class="blue">
<div class="color">成为<div class="color blue">
我该怎么办呢？我是新来的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方法类添加到元素。 它还提供了一个data函数来访问自定义数据属性。 编号：https://api.jquery.com/addclass/
https://api.jquery.com/data/
您还需要编写一些CSS定义背景色为您要添加每个这样的类。一个例子是
<style type='text/css'>
.blue {
background-color: #0000ff;
}
</style>
其余的应该很容易。
首先，如果您想选择所有h1元素，选择器应该是“h1”。如果你使用“h1.color”，你试图找到你没有的css-class“color”的h1-element。
如果你想添加一个类到color div，你应该使用jQuerys addClass-method。
另外值得一提的是，你应该把它包装都在jQuery ready可以肯定，当你操纵它的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（）{...}）中换行;' – FloatingRock
@FloatingRock谢谢，添加 – Esko
@Esko这个代码会在每个'h1'元素点击'div.color '元素是否合适？ – itzmukeshy7
试试这个;）
我增加了蓝色和绿色的颜色检查是否工作或没有。
$(function() {
$('h1.addClass').on('click', function() {
$('div.color').removeClass('blue green').addClass($(this).attr('data-class'));
});
});.blue{
color: #00F;
}
.green{
color: #0F0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="addClass" data-class="blue">Blue</h1>
<h1 class="addClass" data-class="green">Green</h1>
<div class="color">I'm changing colour here.</div>如果超过两个类，我的意思是我们必须删除所有的类。如果有100个呢？如果我们没有课程名称，该怎么办？ –
@AnuradhS在'h1'点击我们不需要担心其他课程。 – itzmukeshy7
我的意思是，当你点击h1时，在添加新类之前，你会删除所有可用的类。我问的是如果有超过2个像'蓝色，绿色，红色，橙色，黄色，紫色等'，那么你必须删除所有。 –
我觉得这是你期待什么。每次用户点击一次h1即可得到remove以前的class和add新的class。以下是工作演示。我已经提出了一些警告，让你有一个想法。希望这会对你有所帮助。
<!DOCTYPE html>
<html>
<head>
\t <title></title>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
\t
</head>
<style type="text/css">
</style>
<h1 data-class="blue">Blue</h1>
<h1 data-class="green">Green</h1>
<h1 data-class="red">Red</h1>
<div class="color">I'm changing colour here.</div>
<body>
<script type="text/javascript">
var myArray = []; // create an empty array to hold all class names, clicked by the user.
$("h1").click(function(){
var data_class_name = $(this).attr('data-class'); //get the class name of clicked h1
myArray.push(data_class_name); //put that class name into the array
alert(myArray); //print the array, then you can see what is added last.
if (myArray.length > 1) // check for the length of the array, if it is more than 1, then remove the second element from the end of the array, because it is the previous class everytime when user click on a new.
{
var getthelastElement = myArray[myArray.length -2];
\t alert(getthelastElement);
\t $("div.color").removeClass(getthelastElement); // remove the previous classs
\t $("div.color").addClass(data_class_name); // add the new class
\t var div_added_class_name = $("div.color").attr('class'); // get the current class of the div.
\t alert("div class names are :---> "+div_added_class_name); // print it from an alert tot get you an idea.
}
else // if the array length is less than 1, there are no class to remove. so only what you have to do is add current class.
{
\t $("div.color").addClass(data_class_name);
\t var div_added_class_name = $("div.color").attr('class');
\t alert("div class names are :---> "+div_added_class_name);
}
});
</script>
</body>
</html>注：解释是在注释中。 :) 祝你好运，祝你有美好的一天。
尝试这个
var divToAddClass = $("div#color");
$('h1').click(function() {
var color = $(this).attr('data-class'); \t
divToAddClass.removeAttr('class').addClass('color ' + color);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-class="blue">Blue</h1>
<h1 data-class="green">Green</h1>
<div class="color" id="color">I'm changing colour here.</div>
欢迎StackOverflow的维拉！它的工作方式是在完成要求后，你应该接受最好的答案..下面有一些很棒的答案。 – FloatingRock