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

jquery html css
-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

Preguntas relacionadas

3 Cambiar la propiedad de "visualización" de clase o CSS de un DIV y mostrarlo sin problemas
5 cómo cambiar un fondo CSS haciendo clic
4 Cómo cambiar la visibilidad de un div css a visible con jQuery

Nuevas preguntas

3 Obtenga el valor de entrada seleccionado en bucle y sume el valor interior cuando cambie
4 Establecer la identificación de una etiqueta tr creada dinámicamente
3 append () no funciona correctamente en jquery?
3 cómo encontrar el valor del atributo de datos correspondiente basado en el texto dentro de div con jquery javascript
3 Con una casilla de verificación DESCONECTADA, ¿cómo filtrar los divs etiquetados NSFW para que se oculten en todo momento, pero cuando se marca en ON, para seguir las reglas de visibilidad?
4 Cómo configurar <a> href automáticamente a otra función div onclick href
2 ¿Cómo mostrar solo 5 imágenes con cargar más funciones usando JQuery?
4 ¿Cómo puedo hacer una nación de puntos en una función?
3 Modifique y elimine la propiedad de la clase CSS usando JQuery
3 Cómo obtener un elemento cuyo onClick se ha activado al hacer clic en cualquier elemento secundario
Nuevas preguntas con la etiqueta jquery >

jquery

jQuery es una biblioteca de JavaScript, considere también agregar la etiqueta de JavaScript. jQuery es una popular biblioteca JavaScript entre navegadores que facilita el recorrido del Modelo de objetos de documento (DOM), el manejo de eventos, las animaciones y las interacciones AJAX al minimizar las discrepancias entre los navegadores. Una pregunta etiquetada jQuery debe estar relacionada con jQuery, por lo que jQuery debe ser utilizada por el código en cuestión y al menos los elementos relacionados con el uso de jQuery deben estar en la pregunta.

Más sobre jquery...