1

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.

1 respuesta 1

3

Tienes que buscar la clase circulo dentro del padre

let circulo = el.querySelector(".circulo");

let estadoColor;

function switchColor(el) {
  let circulo = el.querySelector(".circulo");
  if (estadoColor) {
    circulo.style.backgroundColor = estadoColor;
    estadoColor = null;
  } else {
    estadoColor = circulo.style.backgroundColor;
    circulo.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>

3
  • Mil gracias capo! Una última, perdon que no estaba originalmente planteada: si quisiera regresar al color original (gris), es posible al hacer clic de nuevo?
    – Alvamon6
    Commented el 13 sept. 2022 a las 4:55
  • @Alvamon6 Crea otra pregunta y te la respondo
    – Yussef
    Commented el 13 sept. 2022 a las 4:56
  • es.stackoverflow.com/questions/556821/… Más enfocada a AJAX, PHP MySQL pero a lo mejor podrías darme una mano, gracias
    – Alvamon6
    Commented el 13 sept. 2022 a las 21:18

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.