1

Tengo una serie de imágenes que se cargan con un borde amarillo box-shadow:#FF9 10px 10px 15px;. Al hacer clic en cualquiera de ellas cambia el color del borde a negro. Si pulso en una de color negro, vuelve a cambiar el color del borde a amarillo:

var foto=document.querySelectorAll("figure");
for (var i=0;i<foto.length;i++){
    foto[i].addEventListener("click",cambia_color,false);
}
function cambia_color(e){
    var dimecolor=$(e.target).css("box-shadow");
    if (dimecolor=="rgb(255, 255, 153) 10px 10px 15px 0px"){
    var color=$(e.target).css({"box-shadow":"#666 10px 10px 15px 0px","background":"#000"});
    }else
        if(dimecolor=="rgb(102, 102, 102) 10px 10px 15px 0px"){
            var color=$(e.target).css({"box-shadow":"#FF9 10px 10px 15px 0px","background":"#FF0"});
    }
}

Lo que necesito es que al pulsar en un icono (id=imagen8) elimine las de color amarillo.
Para ello hago lo siguiente:

document.getElementById("Image8").addEventListener("click",borra_seleccion,false);
function borra_seleccion(e){
    var foto=document.querySelectorAll("figure");
    var Total=foto.length;
    for (var i=0;i<Total;i++){
        var color =$(this).css("box-shadow"); // No funciona
        alert(color);
    }
}

El bucle for (var i=0;i<Total;i++) funciona bien, pero var color =$(this).css("box-shadow"); no funciona.

Necesito saber cómo puedo detectar el color en el bucle para borrar las de color amarillo.

1 respuesta 1

1

Para lograr lo que quieres, es mucho más simple tener dos clases separadas. No solo puedes manejar más fácilmente el "cambio de color", sino también la eliminación de los elementos, he preparado un ejemplo con dos clases (.seleccionado y .normal). Los elementos seleccionados tienen el fondo amarillo y los normales el fondo negro.

Cuando se hace clic en el elemento <figure>, haciendo toggle de ambas clases se quita la que tenía y se le deja puesta la otra, con lo que cambia entre amarillo (seleccionado) y negro (normal).

El botón busca todos los elementos seleccionados y los elimina del DOM.

Puedes probar la funcionalidad aquí mismo haciendo clic en el botón Ejecutar, al final del snippet de código.

$(document).ready(function() {
  var foto=document.querySelectorAll("figure");
  for (var i=0;i<foto.length;i++){
      foto[i].addEventListener("click",cambia_color,false);
  }
});

function cambia_color(e){
  let laFigura;
  if (e.target.nodeName == 'FIGURE') laFigura = e.target
  else if (e.target.parentNode && e.target.parentNode.nodeName == 'FIGURE')  laFigura = e.target.parentNode;
  
  if (laFigura) {
    $(laFigura).toggleClass("seleccionado");
    $(laFigura).toggleClass("normal");
  }
}

function borrarSeleccion() {
  $(".seleccionado").remove();
}
figure {
  margin: 10px;
  padding: 10px;
  width: 170px;
  float: left;
  text-align: center;
}


figcaption {
  background: gray;
}

figure.seleccionado {
  box-shadow: #FF9 10px 10px 15px 0px;
  background: #FF0;
}

figure.normal {
  box-shadow: #666 10px 10px 15px 0px;
  background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div">
  <figure id="fig1" class="seleccionado">
    <img src="https://www.gravatar.com/avatar/101970df46cc6f3ba9a83daae9b54613?s=150&d=identicon&r=PG">
    <figcaption>jachguate</figcaption>
  </figure>
  <figure id="fig2" class="seleccionado">
    <img src="https://www.gravatar.com/avatar/b66cdef56ab88b2a8ff1eeb7b5c503c7?s=150&d=identicon&r=PG">
    <figcaption>Carlos del juez</figcaption>
  </figure>
  <figure id="fig3" class="seleccionado">
    <img src="https://i.sstatic.net/7UmHim.jpg?s=150&g=1" width="150">
    <figcaption>anythingg</figcaption>
  </figure>
  <figure id="fig4" class="seleccionado">
    <img src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=150&d=identicon&r=PG">
    <figcaption>otra persona</figcaption>
  </figure>
  <button id="boton" onclick="borrarSeleccion()">Borrar amarillos</button>
</div>

Ojo, que para cambiar el color debes hacer clic a la izquierda o derecha de la foto.

Edición

En una versión anterior de esta respuesta había un bug, ya que el método cambia_color se disparaba cuando se hacía clic, no solo sobre la figura, sino sobre sus elementos hijos, e incorrectamente se cambiaba la clase de estos (de la imagen y/o de su etiqueta).

Esto provocaba que, al borrar, ya que solo nos basamos en la clase, se borraran algunos de estos elementos, que estaban en figuras que no se borraban y quedaban incompletas.

En esta versión, se inspecciona el tipo de elemento de e.target y, si no es 'FIGURE', se mira hacia arriba, para ver si el padre lo es.

Al final, solamente si se ha encontrado la figura se hace el cambio de clase. Con ello nos aseguramos que solo se borren figuras completas y nunca sus elementos, pues solo estas podrán tener la clase .seleccionado.

11
  • Muchas gracias por tu respuesta, una solución muy inteligente. Un saludo
    – user227328
    Commented el 10 may. 2021 a las 8:31
  • Hola @jachguate La respuesta es muy buena, pero se me plantea un problema y es cómo puedo hacer que no se eliminen los nombres de las personas seleccionas. Hacer que se mantenga la imagen y su nombre. Si observáis en al ejemplo, al eliminar alguna imagen, elimina también los nombres de las no seleccionadas. Un saludo. Commented el 12 may. 2021 a las 21:02
  • No entiendo bien a lo que te refieres. ¿Para comenzar, mi ejemplo o tu ejemplo? ¿Qué es exactamente lo que hace de más o de menos?
    – jachguate
    Commented el 13 may. 2021 a las 1:41
  • Si te fijas bien en tu ejemplo cuando eliminas una o varias imágenes, las que quedan aparecen sin el nombre de usuario "figcaption" también se borra. Un saludo Commented el 19 may. 2021 a las 18:00
  • No se borran, cambié el color de fondo de los <figcaption>s para que puedas verlos aún cuando estén no seleccionadas las imágenes.
    – jachguate
    Commented el 19 may. 2021 a las 18:58

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