add style with javascript to each element

Question

I want add class to my div but I have so many div and any time clicked button just add or remove on one div in html how can I do? is there any way to use value or id? such as that link in command

if you lock i have to button to show&hide dive but no matter which one is clicked it's just add class to first one

Please edit the question to include the minimal reproducible example. — evolutionxbox
– evolutionxbox, Commented Apr 22, 2022 at 9:25

Simone Rossaini · Accepted Answer · 2022-04-22 09:38:03Z

0

If you mean for toggle class slow you can use e.target with next() for toggle element like:

$('.toggle').click(function(e) {
    $(e.target).next().toggle('slow');
});

body {padding:30px;}

#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle">Show &amp; Hide</button>
<div>
  <p>test1</p>
</div>
  
</div>
<div>
  <button class="toggle">Show &amp; Hide</button>
<div>
  <p>test2</p>
</div>
</div>

Or you can use data-target like:

$('.toggle').click(function(e) {
    $('#'+ e.target.dataset.target).toggle('slow');
});

body {padding:30px;}

.target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle" data-target="target-1">Show &amp; Hide</button>
<div id="target-1" class="target">
  <p>test1</p>
</div>
  
</div>
<div>
  <button class="toggle" data-target="target-2">Show &amp; Hide</button>
<div id="target-2" class="target">
  <p>test2</p>
</div>
</div>

Another rule you must learn, id must be unique.

Reference:

edited Apr 22, 2022 at 9:38

answered Apr 22, 2022 at 9:32

Simone Rossaini

8,1461 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

reza er Over a year ago

tnx this is any thing i search it

Dimeji Ogunleye · Accepted Answer · 2022-04-22 09:23:06Z

0

You can have many divs with the same class but if your looking to do something more specific to a particular div you have to use id or a seperate class. Read more about CSS selectors

<div class="blue" id="standout">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>

.blue{
text-align: center;
}

 #standout{
text-overflow: ellipsis;
 }

answered Apr 22, 2022 at 9:23

Dimeji Ogunleye

212 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Urs Bo · Accepted Answer · 2022-04-22 09:26:29Z

0

Add a class (or id) to the button like this:

<button class="foo-class" id="foo-id">Click me</button>

And then you can access the click on the button with the following javascript:

// class
document.querySelector('.foo-class').click(
  // do something
);

// id 
document.getElementById("foo-id").click(
   // do something
);

See here for reference the id and here the reference for class.

answered Apr 22, 2022 at 9:26

Urs Bo

3422 silver badges12 bronze badges

Collectives™ on Stack Overflow

add style with javascript to each element

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related