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.