Tengo la siguiente estructura, donde (omitiendo la clase .m-2
) .drop__card
sería el elemento padre y .circulo
uno de los elementos hijo.
<div class="m-2">
<div class="drop__card" onclick="switchColor(this);"> <!-- PADRE -->
<div class="drop__data">
<div>
<p class="fw-bold m-0">TITULO</p>
</div>
</div>
<div class="circulo"> <!-- HIJO -->
<h2>HIJO</h2>
</div>
</div>
</div>
Al hacer clic en el card, la función switchColor
me cambia el color de fondo de la misma:
let estadoColor;
function switchColor(el) {
if (estadoColor) {
el.style.backgroundColor = estadoColor;
estadoColor = null;
} else {
estadoColor = el.style.backgroundColor;
el.style.backgroundColor = '#e35d6a';
}
}
.drop__card {
background-color: #fff;
}
.circulo {
width: 30px;
height: 30px;
border-radius: 50%;
background: #cecece;
display: flex;
justify-content: center;
padding: 8px;
}
.circulo>h2 {
font-family: sans-serif;
color: black;
font-size: 12px;
font-weight: bold;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container my-5">
<div class="m-2 ui-sortable-handle">
<div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
<div class="drop__data">
<div>
<p class="fw-bold m-0">VIERNES</p>
</div>
</div>
<div class="circulo">
<h2>5</h2>
</div>
</div>
</div>
<div class="m-2 ui-sortable-handle">
<div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
<div class="drop__data">
<div>
<p class="fw-bold m-0">SABADO</p>
</div>
</div>
<div class="circulo">
<h2>6</h2>
</div>
</div>
</div>
<div class="m-2 ui-sortable-handle">
<div class="drop__card d-flex align-items-center justify-content-between border rounded shadow-sm p-2" onclick="switchColor(this);">
<div class="drop__data">
<div>
<p class="fw-bold m-0">DOMINGO</p>
</div>
</div>
<div class="circulo">
<h2>7</h2>
</div>
</div>
</div>
</div>
Lo que necesito es aplicar esta función únicamente al hijo, es decir la clase .circulo
Si cambio la posición del onclick dentro del elemento hijo, funciona.
<div class="m-2">
<div class="drop__card"> <!-- PADRE -->
<div class="drop__data">
<div>
<p class="fw-bold m-0">TITULO</p>
</div>
</div>
<div class="circulo" onclick="switchColor(this);"> <!-- HIJO -->
<h2>HIJO</h2>
</div>
</div>
</div>
Pero necesito que funcione haciendo clic desde el padre, que por tamaño y comodidad, sería el primero en dar clic.