0

Tengo una lista HTML donde tengo varios iconos que son opciones de la lista, debido a que estos trabajando con .NET he agregado un textbox para facilitar el envio de datos a mi BD, en ese textbox segun el icono que seleccionen envio la class "fa fa-android" o segun sea el icono que se seleccione, eso lo hago con

        var iconos = document.querySelectorAll('.fa');
        var input = document.getElementById('<%=txtIcono.ClientID%>');
        for (var i = 0; i < iconos.length; i++) {
            iconos[i].addEventListener('click', function () {
                input.value = this.className;
            });
        }

 <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>

Ahora, siempre que doy clic en el boton aceptar para enviar los datos al servidor, si hace falta algun dato no se envia nada (por que tengo validaciones) pero se des-selecciona el icono que he elegido, solo mantengo en el textbox la clase por ejemplo "fa fa-android" del icono que se selecciono, es por ello que ahora quiero que de acuerdo lo que tenga el textbox se pueda seleccionar el icono de la lista HTML con JQuery o JS

5
  • 2
    Puedes explicar mejor tu pregunta? No la logro entender.
    – Einer
    Commented el 6 dic. 2017 a las 21:13
  • Si te explica mejor, alguien rápidamente te ayudará... Commented el 6 dic. 2017 a las 23:42
  • @ChristianD.Rodriguez ya describi el problema
    – Ivxn
    Commented el 7 dic. 2017 a las 0:00
  • @Einer ya describi el problema
    – Ivxn
    Commented el 7 dic. 2017 a las 0:00
  • puedes poner un ejemplo en el fragmento código para poder ayudarte Commented el 7 dic. 2017 a las 0:17

2 respuestas 2

1

Hola amigo, te comparto la funcionalidad que buscas... el buscador va ir encontrando coincidencias de clases. Espero que te funcione en tu caso modificarías, el evento keyup (lo quitarías), y el $(this).val() sería el valor que obtienes de BD ¡Saludos!

$(function() {

  var $icon = $("#txtIcon"),
    $navegador = $("#navegador");

  $icon.on("keyup", function(e) {
       	
      //inicializa todos los iconos a un color default
      $navegador.find("a > i").css({
        color: "blue"
      });
      
      //el icono que buscas lo coloca en color rojo
      var clase  = $(this).val().replace(' ','.');
      $navegador.find("a > i." + clase).css({
        color: "red"
      });
   


  });


});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<input id='txtIcon'>

<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>

0

Gracias, por ayudarme a entender mejor, aquí te dejo un snippet con la correción. Si no funciona puedes verlo en https://jsfiddle.net/elporfirio/9wbmzzd3/

UPDATED VERSION: https://jsfiddle.net/9wbmzzd3/1/

Como no mencionaste el evento, lo puse al dar click nuevamente en el elemento:

for (var i = 0; i < iconos.length; i++) {
  iconos[i].addEventListener('click', function () {
    input.value = (input.value === this.className) ? '' : this.className;
  });
}

Si dan click en el mismo elemento lo "deselecciona" según el código que nos pones.

UPDATE: Ahora tambien al cambiar el texto se busca cual esta elegido, el evento desde el input se lanza al quitar el foco del mismo (blur) aunque se le puso el "change" event.

var iconos = document.querySelectorAll('.fa');
var input = document.getElementById('txtIcon');  //Modifique el ID

// cada que cambie se ejecuta la funcion setIcon
input.addEventListener('change', setIcon);

for (var i = 0; i < iconos.length; i++) {
  iconos[i].addEventListener('click', function () {
  	input.value = (input.value === this.className) ? '' : this.className;
    
    // La ejecutamos manual pues el onchange no se lanza si se cambia con JS
    input.dispatchEvent(new Event('change'));
  });
}

function setIcon(selector){
   // Estas 4 lineas hacen la magia de cambiar los textos a clases validad para buscar
  var validClassName = selector.srcElement.value.trim().split(' ');
  var stringClass = validClassName.join('.');
  var all = document.querySelectorAll('.fa');
  var found = document.querySelectorAll('.'+ stringClass);
  
  // Los regresamos todos a normal, antes de colorear
  all.forEach(function(element){
     element.style.color = 'black';
  });

  // coloreamos el elegido
  if(found.length > 0){
     found[0].style.color = 'red';
  }
}
a {
  color: black;
  text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input id='txtIcon'>

<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
  • gracias amigo pero lo que realmente requiero es que si ingreso en el textbox "fa fa-android" cambie de color el icono al que le pertenece esa clase
    – Ivxn
    Commented el 7 dic. 2017 a las 20:04
  • 1
    No se diga más, ya lo actualize.. ahora puedes teclear el nombre tambien ;) jsfiddle.net/9wbmzzd3/1 El evento, se actualiza al quitar el foco del input... si vas a editar este input.dispatchEvent(new Event('change')); es la clave para ejecutar despues de recuperar los datos
    – elporfirio
    Commented el 9 dic. 2017 a las 4:03

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.