add style with javascript to each element

April 22, 2022

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

>Solution :

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: