在点击时添加类？

Question

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

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

当我单击<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>

Answer 1

试试这个;)

我已经添加了蓝色和绿色来检查这是不是工作。

​

$(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>

​

Answer 2

首先，如果你想选择所有的h1元素，选择器应该是"h1“。如果你使用"h1.color“，你会试图找到css类中没有"color”的h1元素。

如果你想添加一个类到颜色addClass-method，你应该使用jQuerys div。

同样值得注意的是，您可能应该将其全部包装在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>

Answer 3

尝尝这个

​

var divToAddClass = $("div#color");
$('h1').click( function() {
    var color = $(this).attr('data-class');    	
    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>

​