es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cerrar otro div cuando se abre un nuevo div (en forloop.counter)

18 Jul, 2023 Programación

Estoy tratando de cerrar el otro div cuando abro un nuevo div, pero lo estoy utilizando en un bucle, así que usé forloop.counter, pero no está funcionando. Y cuando intento usarlo sin forloop.counter o fuera del bucle, entonces funciona bien, pero quiero usarlo dentro del bucle for.

page.html


{% for result in results %}

<pre><code><button class="open-div-button" onclick="openDiv-{{forloop.counter}});">Abrir Div</button>

<div class="div-content" id="content-{{forloop.counter}}">Contenido Aquí</div>
</code></pre>

{% endfor %}

<script>

<pre><code>function openDiv(id) {
    let model = document.getElementById(`openDiv-${id}`);
    model.classList.toggle("active");
}
</code></pre>

</script>

<style>

<pre><code>.content {
    padding: 10px 20px;
    display: none;
    background-color: #f1f1f1;
}

.content.active {
    padding: 10px 20px;
    display: block;
    background-color: #f1f1f1;
}
</code></pre>

</style>

También he intentado usar forEach de esta manera: –

function openDiv(id) {
    let model = document.getElementById(`openDiv-${id}`);
  document.querySelectorAll(`openDiv-${id}`).forEach(function(div) {
    if (div.id == id) {
      model.classList.toggle("active");
    } else {
      model.classList.toggle("active");
    }
  });
}

Pero no está funcionando y no muestra ningún error.

¿Qué estoy tratando de hacer?

Estoy tratando de cerrar el div activo cuando se abre un nuevo div en el bucle for.

He intentado muchas veces pero no funcionó. Vi muchas preguntas, pero desafortunadamente no encontré ninguna para forloop.counter. Cualquier ayuda será muy apreciada. Gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para cerrar otros divs cuando se abre un nuevo div en un bucle usando forloop.counter

    Para cerrar otros divs cuando se abre un nuevo div en un bucle usando forloop.counter, puedes almacenar el ID del div abierto actual en una variable fuera del bucle y comprobar si no es igual al ID de la iteración actual antes de cerrarlo.

    Así es como puedes modificar tu código para lograr esto:

    {% for result in results %}
    <button class="open-div-button" onclick="openDiv({{forloop.counter}});">Abrir Div</button>
    <div class="div-content" id="content-{{forloop.counter}}">
        El contenido va aquí
    </div>
{% endfor %}

<script>
    let currentOpenDiv = null;

    function openDiv(id) {
        let model = document.getElementById(`content-${id}`);
        model.classList.toggle("active");

        if (currentOpenDiv && currentOpenDiv !== id) {
            let prevModel = document.getElementById(`content-${currentOpenDiv}`);
            prevModel.classList.remove("active");
        }
        currentOpenDiv = id;
    }
</script>

    Explicación:
    – Almacenamos el ID del div abierto actual en la variable currentOpenDiv e inicializamos su valor en null.
    – Cuando se hace clic en un botón, pasamos su valor forloop.counter a la función openDiv().
    – Dentro de la función, obtenemos el div actual utilizando document.getElementById() y alternamos su clase active.
    – Luego, comprobamos si currentOpenDiv no es null y si no es igual al ID actual (lo que significa que otro div está abierto). En ese caso, obtenemos el elemento del div abierto anterior utilizando document.getElementById() y le quitamos su clase active.
    – Finalmente, actualizamos la variable currentOpenDiv con el ID actual.

    De esta manera, solo se abrirá un div a la vez y el div abierto anterior se cerrará cuando se abra uno nuevo.

Comments are closed.