Tengo un conjunto de etiquetas span (para bloques de color) y dentro de cada una, tengo otra span tag (para iconos). Quiero cambiar la propiedad css de un icono de display:none a display:block tan pronto como se haga clic en uno de los colores. La condición es que cuando uno de los íconos tiene display:block, el resto debe estar oculto.

JSFiddle para tener una mejor idea de lo que quiero decir

Entonces, esto es lo que quiero decir en pasos:

  1. Se debe hacer clic en colors' span/block

  2. Cuando se hace clic en una de ellas, se debe mostrar icon

  3. Cuando se hace clic en otro de los colores, se debe mostrar el ícono, pero el ícono anterior que se mostró ahora debe estar oculto

-2
sanjana 13 ene. 2018 a las 13:28

3 respuestas

La mejor respuesta

Debe cambiar su controlador $(".colors").click(function(){ a $(document).on('click', '.colors', function(){ y hacer su lógica de mostrar / ocultar en el evento de clic:

$(document).on('click', '.colors', function(){
  //display "fa fa-check" on the clicked div and hide it on the rest
  $('.fa.fa-check').hide();
  $('.fa.fa-check', $(this)).show();
});
1
Steve T 13 ene. 2018 a las 10:54

Puede usar jquery simple en esto:

Seleccione su etiqueta de etiqueta, así como cada div de color con selector de identificación

<div id="label"></div>
<div id="red"></div>

luego en jquery:

<script>
    $("#red").click(function(){
   $("#label").css("background-color","red");
})

</script>
0
Saurabh 13 ene. 2018 a las 10:42

Siempre puede optar por una solución CSS pura más simple, agregar botones de radio y usar etiquetas en lugar de espacios para sus colores, y luego cambiar la visibilidad de la opción marcada.

    .fa.fa-check{
        visibility: hidden;
        color:white;
        padding-top: 8px; 
        padding-left:14px;
        font-size:15px;
    }
.colors{
        cursor:pointer;
        width:42px; 
        height:30px;
        margin-right:3px;
        border-radius:3px; 
        display:inline-block;
    }

.option{display:none;}

.option:checked + label span{
  visibility: visible;
}

http://jsfiddle.net/qsJ3c/44/

0
Facundo Corradini 13 ene. 2018 a las 11:08
48238981