Quiero agregar una clase a mi div, pero tengo tantos div y en cualquier momento hice clic en el botón simplemente agregar o eliminar en un div en html, ¿cómo puedo hacerlo? ¿Hay alguna forma de usar el valor o la identificación? como ese enlace al mando
si bloquea, tengo que hacer clic en el botón para mostrar y ocultar la inmersión, pero no importa en cuál se haga clic, solo se agrega la clase a la primera
Puede tener muchos divs con la misma clase, pero si busca hacer algo más específico para un div en particular, debe usar id o una clase separada. Más información sobre los selectores de CSS
<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; }Agregue una clase (o id) al botón como este:
<button class="foo-class" id="foo-id">Click me</button>Y luego puede acceder al clic en el botón con el siguiente javascript:
// class document.querySelector('.foo-class').click( // do something ); // id document.getElementById("foo-id").click( // do something );Vea aquí para referencia la identificación y aquí la referencia para la clase.
Si te refieres a alternar la clase slow , puedes usar e.target con next() para alternar elementos como:
$('.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 & Hide</button> <div> <p>test1</p> </div> </div> <div> <button class="toggle">Show & Hide</button> <div> <p>test2</p> </div> </div> O puede usar data-target como:
$('.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 & Hide</button> <div id="target-1" class="target"> <p>test1</p> </div> </div> <div> <button class="toggle" data-target="target-2">Show & Hide</button> <div id="target-2" class="target"> <p>test2</p> </div> </div>Otra regla que debes aprender, la identificación debe ser única .
Referencia: