add style with javascript to each element-CodePudding

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

CodePudding user response：

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 >Show &amp; Hide</button>
<div>
  <p>test1</p>
</div>
  
</div>
<div>
  <button >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  data-target="target-1">Show &amp; Hide</button>
<div id="target-1" >
  <p>test1</p>
</div>
  
</div>
<div>
  <button  data-target="target-2">Show &amp; Hide</button>
<div id="target-2" >
  <p>test2</p>
</div>
</div>

Another rule you must learn, id must be unique.

Reference:

CodePudding user response：

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  id="standout">Hello world</div>
<div >Hello world</div>
<div >Hello world</div>
<div >Hello world</div>

.blue{
text-align: center;
}

 #standout{
text-overflow: ellipsis;
 }

CodePudding user response：

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

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