0

Estoy trabajando con html y js, tengo una serie de iconos como items de una lista HTML que forman parte de un formulario, los cuales si se selecciona algun icono, el background del icono cambia para distinguir que ese icono esta seleccionado, y obtengo el nombre de la clase del icono en un textbox o input para guardarla en una BD junto con los otros datos, me surge un problema que cuando selecciono el icono cambia de color el background pero cuando hago click en cualquier parte de la pagina se borra el background y queda como si no hubiera seleccionado nada, pasa como si cambiara el foco, Alguien sabe ¿como puedo corregir ese problema?, no se si sea el css o el js mi codigo esta abajo de la imagen

introducir la descripción de la imagen aquí

JS

  $(document).ready(function () { 
       var iconos = document.querySelectorAll('.fa');
            //El Input a dondese enviará el valor de la clase
            var input = document.getElementById('<%=txtIcono.ClientID%>');
                //alert(input);
            //Iteramos sobre los iconos para agregar el Listener
            for (var i = 0; i < iconos.length; i++) {
                //agregamos el Listener para el evento click
                iconos[i].addEventListener('click', function () {
                    // asignamos al input el valor de la clase.
                    input.value = this.className;

                });
            }
    });

CSS

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.enlace > a:focus .fa {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}

Lista HTML

<ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
                                    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
                                </ul>

2 respuestas 2

1

Eso es porque el estilo lo estableces sobre el elemento que tiene el foco:

.enlace > a:focus .fa {
  cursor: pointer;
  background-color: gold;
  border-radius: 50%;
}

Deberías utilizar alguna clase para identificar el botón activo, independientemente de si tiene el foco o no. Algo así:

.fa.seleccionado {
  cursor: pointer;
  background-color: gold;
  border-radius: 50%;
}

Luego en el evento click, a parte de rellenar el elemento txtIcono, deberías quitar la clase seleccionado del elemento que la tuviera y añadírsela al elemento sobre el que se ha hecho click.

Además, ya que tienes jQuery, ¿por qué no lo usas para manipular el DOM? Ese es precisamente su fuerte:

$(document).ready(function () { 
  var $iconos = $('.fa');
  $iconos.click(function(){
    $iconos.removeClass('seleccionado');
    $('#txtIcono').val($(this).attr('class'));
    $(this).addClass('seleccionado');
  });
  $('#seleccionar').click(function(){
    var clase = $('#txtIcono').val().trim();
    if (clase){
      var icono = $('.' + clase.replace(' ', '.'));
      if (icono && icono.length){
        $iconos.removeClass('seleccionado');
        icono.addClass('seleccionado');
      }
    }
  });
});
.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 10px;
}

.social-icons .fa {
    font-size: 1em;
}

.social-icons .fa {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #FFF;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social-icons.icon-circle .fa {
    border-radius: 50%;
}

.social-icons.icon-rounded .fa {
    border-radius: 5px;
}

.social-icons.icon-flat .fa {
    border-radius: 0;
}

.social-icons .fa:hover, .social-icons .fa:active {
    background-color: blue;
    color: #FFF;
    -webkit-box-shadow: 1px 1px 3px #333;
    -moz-box-shadow: 1px 1px 3px #333;
    box-shadow: 1px 1px 3px #333;
}

.social-icons.icon-zoom .fa:hover, .social-icons.icon-zoom .fa:active {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.social-icons.icon-rotate .fa:hover, .social-icons.icon-rotate .fa:active {
    -webkit-transform: scale(1.1) rotate(360deg);
    -moz-transform: scale(1.1) rotate(360deg);
    -ms-transform: scale(1.1) rotate(360deg);
    -o-transform: scale(1.1) rotate(360deg);
    transform: scale(1.1) rotate(360deg);
}

.fa.seleccionado {
    cursor: pointer;
    background-color: gold;
    border-radius: 50%;
}
.toolbar{
  background-color: #333333;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar">
  <ul id="navegador" class="social-icons icon-circle list-unstyled list-inline">
    <li class="enlace"><a href="#"><i class="fa fa-android"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-apple"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-bitcoin"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-css3"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-dropbox"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-html5"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linkedin"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-linux"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-pinterest"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-skype"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-trello"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-tumblr"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-tumblr-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-vimeo-square"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-windows"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-youtube"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-youtube-play"></i></a></li>
    <li class="enlace"><a href="#"><i class="fa fa-youtube-square"></i></a></li>
  </ul>
</div>
<input type="text" id="txtIcono" />
<button id="seleccionar">Seleccionar</button>

3
  • gracias muy completa tu ayuda, una pregunta que necesito hacer para que en lugar de seleccionar el icono ahora pueda introducir el class del icono en el textbox o input y se seleccione el icono respectivo?
    – Ivxn
    Commented el 8 dic. 2017 a las 2:29
  • 1
    He modificado el ejemplo para mostrar cómo se podría hacer. Tendrías que coger el valor del input y transformarlo en un selector jQuery. Si las clases introducidas son fa fa-windows el selector jQuery debería ser .fa.fa-windows. A partir de ahí es prácticamente igual: seleccionas el elemento, quitas a todos la clase seleecionado y se la añades al elemento a marcar. Commented el 8 dic. 2017 a las 8:50
  • gracias brother por mas que buscaba no sabia como realizarlo, son muy utiles tus respuestas
    – Ivxn
    Commented el 8 dic. 2017 a las 18:52
1

No entiendo mucho tu codigo, parece q lo estas mesclando con java y que usas jquery pero a la ves no, esta es una forma mas sencilla de hacerlo:

$('.fa').on("click",function(){
  $this.css("background-color","blue");
})

De esta manera te evitas saber el id y todo eso y si quieres deseleccionarlo al darle otro click, solo validas por el color.

1
  • Gracias por tu interés en participar en la comunidad. revisar Cómo responder.
    – Jorgesys
    Commented el 23 feb. 2018 a las 19:25

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.