tengo varios
Y quiero agregar esa clase solo durante 2 minutos después de eso, elimine esa clase y oculte div
Mi código HTML de la siguiente manera:
$('body').on("click", ".more, .less", function() { var obj = $(this); obj.closest('.product_info').find('.display_on_click').addClass('display_on_click_show'); }); .display_on_click { display: none } .display_on_click.display_on_click_show { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <ol class="item_wrapper"> <li class="product_info"> <div class="title"> <h3>Title here</a> </div> <div class="incre_decre"> <a class="more">+</a> <a class="less">+</a> </div> <div class="display_on_click">Updated</div> </li> <li class="product_info"> <div class="title"> <h3>Title here</a> </div> <div class="incre_decre"> <a class="more">+</a> <a class="less">+</a> </div> <div class="display_on_click">Updated</div> </li> <li class="product_info"> <div class="title"> <h3>Title here</a> </div> <div class="incre_decre"> <a class="more">+</a> <a class="less">+</a> </div> <div class="display_on_click">Updated</div> </li> </ol> </div>Alguien tiene idea de lo que estoy haciendo mal, entonces hágamelo saber. Y quiero agregar esa clase solo durante 2 minutos después de eso, elimine esa clase y oculte
Yo lo haría así:
$('body').on("click", ".more, .less", function() { let parentLi = $(this).parent().parent(); let elementToManipulate = obj.find('.display_on_click'); elementToManipulate.addClass('display_on_click_show'); setTimeout(()=> { elementToManipulate.removeClass('display_on_click_show') }, 120000); }); En lugar de usar los más cercanos, estoy agarrando el padre del padre que es <li> . Puedes usar el más cercano para agarrarlo. Una vez que estoy en el padre li, encuentro al hijo con la clase .display... (el objeto elementToManipulate).
Luego agrego las clases y creo un setTimeout para eliminar la clase después de 120.000 milisegundos (60 s * 2 * 1000 milisegundos)
<button onClick='OpenDiv'>Open</button> function OpenDiv(){ let div = document.getElementById('BoxOne') if (div.style.display == 'flex') { div.style.display = 'none'; else div.style.display = 'flex'; }Espero que esto funcione 👍