Add class by click?

Question

Add class by click?

I want to add a class to div.color every time I click on h1.

The problem is that I want another class to be added to div.color when I press another h1.

When i click <h1 data-class="blue">

<div class="color"> becomes <div class="color blue">

How should I do it? I am new to jquery, so it is quite difficult for me ...

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

+4

jquery

Vera jane Oct 11 '16 at 6:00

source share

5 answers

itzmukeshy7 · Answer 1 · 2016-10-11T06:11:45+0000

Try it;)

I added blue and green to check if this works or not.

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

Run code

Esko · Answer 2 · 2016-10-11T06:08:35+0000

First of all, if you want to select all h1 elements, the selector must be "h1". If you use "h1.color", you are trying to find the h1 element with the css class "color", which you do not have.

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>

Ankit Lad · Answer 3 · 2016-10-11T07:04:55+0000

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>

sid-m · Answer 4 · 2016-10-11T06:08:32+0000

jQuery addClass . data . : https://api.jquery.com/addclass/
https://api.jquery.com/data/

CSS, , . :

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

.

Anuradh s · Answer 5 · 2016-10-11T06:49:36+0000

I think this is what you expect. every time the user clicks on h1it removeprevious classand addnew class. below is a working demo. I set a warning for you to understand. hope this helps you.

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

Run code

Note: explanation in the comments. :) good luck and have a nice day.

Add class by click?

More articles: