0

Necesito que un div al hacer clic sobre él se cambie de clase. Estoy usando Django, y en la plantilla el div está dentro de un bucle for donde aparecen los datos de un modelo.

El problema viene cuando haces clic sobre el div y se abren todos los div generados por el bucle for, usando javascript, en vez de solamente el que se ha hecho clic.

{% for venderpaginasweb in ofertasWeb %}

 <div class="container-fluid clase1" onclick="cambiarDiv()">



    <div class="row">

      <div class="col-4">

      <label for='sitetype'>Tipo de sitio:</label>

       <p class="text-danger">{{venderpaginasweb.sitetype}}</p>

      </div>
      <div class="col-4">

          <label for='urlsite'>URL del sitio:</label>
          <a href="{{urlsite}}">{{venderpaginasweb.urlsite}}</a>


        </div>

     <div class="col-4">
        <label for='uniquevisits'>Visitas Únicas:</label>

        <p>{{venderpaginasweb.uniquevisits}}</p>

     </div>  



 </div>
{% endfor %}

<script>



        function cambiarDiv(){

          $(".clase1").addClass("clase2");



        }

</script>

Lo que necesito es que al hacer clic sobre un div, que se encuentra dentro de un bucle for en la plantilla, se cambie de clase solo el div seleccionado y no los demás div generados por el bucle for.

La respuesta que ha dado el usuario es correcta. Pero si quiero poner dos botones, uno para añadir clase al div y otro para remover la clase al div, solo se cambia el primer div de todos los generados por el bucle for.

<script>

 function cambiarDiv(el) {



  $('#cmdiv').addClass('clase2')
}

 </script>
{% for venderpaginasweb in ofertasWeb %}

 <div class="container-fluid clase1" id="cmdiv">

  <div class="row">
    <div class="col-12 d-flex justify-content-start mt-1 mb-2">

    <button class="btn btn-info d-inline stybtn mr-1 shadow-sm" onclick="cambiarDiv(this)">Ver mas</button>
    <button class="btn btn-info d-inline stybtn mr-1 shadow-sm">Cerrar</button>


</div>
</div>
<hr>
    <div class="row mt-2 mb-2">

      <div class="col-4">

      <label for='sitetype' class="lbst"><u><b>Tipo de sitio:</b></u></label>

       <p class="text-danger">{{venderpaginasweb.sitetype}}</p>

      </div>
      <div class="col-4">

          <label for='urlsite' class="lbst d-block">URL del sitio:</label>
          <a href="{{urlsite}}" class="text-danger text-decoration-none d-block">{{venderpaginasweb.urlsite}}</a>


        </div>

     <div class="col-4">
        <label for='uniquevisits' class="lbst">Visitas Únicas:</label>

        <p class="text-danger">{{venderpaginasweb.uniquevisits}}</p>

     </div>  



    </div>

{% endfor %}

Como puedo hacer para que se cambie de clase cada div generado por el bucle for al apretar su botón de "ver mas" correspondiente.

1 respuesta 1

1

Cada vez que llamas a la función cambiarDiv podrías pasarle el elemento del cual proviene el click usando this que hará referencia a tal elemento, y en la función le haces el target al elemento recibido.

Actualización: A este elemento recibido le puedes buscar el nodo ancestro que sea un div con la clase clase1 usando la función de closest() de jQuery y a este elemento le aplicas la nueva clase de la siguiente manera:

function cambiarDiv(el) {
  $(el).closest('div.clase1').addClass('clase2')
}
.container-fluid {  
  width: 12rem;
  height: 6rem;
  margin: 1rem;
  background-color: tomato;  
}

.clase2 {
  background-color: cyan;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid clase1">
  <div class="row">
    <div class="col-12 d-flex justify-content-start mt-1 mb-2">
      <button class="btn btn-info d-inline stybtn mr-1 shadow-sm" onclick="cambiarDiv(this)">Ver mas</button>
      <button class="btn btn-info d-inline stybtn mr-1 shadow-sm">Cerrar</button>
    </div>
  </div>
</div>
<div class="container-fluid clase1">
  <div class="row">
    <div class="col-12 d-flex justify-content-start mt-1 mb-2">
      <button class="btn btn-info d-inline stybtn mr-1 shadow-sm" onclick="cambiarDiv(this)">Ver mas</button>
      <button class="btn btn-info d-inline stybtn mr-1 shadow-sm">Cerrar</button>
    </div>
  </div>
</div>

2
  • Me ha funcionado, pero necesito poner un boton dentro de cada div para que cuando se pulse el boton, el div seleccionado cambie de clase. He editado mi primer mensaje para que quede más claro.
    – FerD
    Commented el 1 sept. 2019 a las 19:36
  • respuesta actualizada Commented el 1 sept. 2019 a las 20:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.