Question

我想在每次点击h1时为div.color添加一个类。

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

点击RailsAdmin.config do |config| # Popular gems integration ## Clearance config.authorize_with do |controller| unless current_user.admin? redirect_to( main_app.root_path, alert: "You are not permitted to view this page" ) end end config.current_user_method { current_user } end

<h1 data-class="blue">变为<div class="color">

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

<div class="color blue">

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

Answer 3

试试这个

＆＃13;

var divToAddClass = $("div#color");
$('h1').click( function() {
    var color = $(this).attr('data-class');    	
    divToAddClass.removeAttr('class').addClass('color ' + color);
});

＆＃13;

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

＆＃13;

Answer 4

jQuery提供了addClass方法来向元素添加类。它还提供data函数来访问自定义数据属性。参考：https://www.visualstudio.com/en-us/docs/build/admin/index#deploy_agent
https://api.jquery.com/addclass/

您还需要编写一些CSS来为要添加的每个类定义背景颜色。一个例子是

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

其余的应该很容易。

Answer 5

我认为这是你所期待的。每当用户点击h1 remove之前的class和add新的class时，下面是工作演示。我已经提出一些警告让你有个主意。希望这对你有所帮助。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	
</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];
	alert(getthelastElement);

	$("div.color").removeClass(getthelastElement); // remove the previous classs

	$("div.color").addClass(data_class_name); // add the new class

	var div_added_class_name = $("div.color").attr('class'); // get the current class of the div.
	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.
    {
    	$("div.color").addClass(data_class_name);

	var div_added_class_name = $("div.color").attr('class');
	alert("div class names are :--->  "+div_added_class_name);
    }

   

});


</script>

</body>
</html>

注意：解释在评论中。：）祝你好运，祝你有个美好的一天。

点击添加课程？

5 个答案: