if I enter the textbox "fa fa-android" change the icon to which that class belongs with JQuery or Js

Navigation
0

I have an HTML list where I have several icons that are options from the list, because these working with .NET I have added a textbox to facilitate the sending of data to my BD, in that textbox according to the icon you select send the class "fa fa-android" or depending on the icon that is selected, that's what I do with 

        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>

Now, whenever I click on the accept button to send the data to the server, if any data is missing, nothing is sent (because I have validations) but the icon that I have chosen is unselected, I only keep in the textbox the class for example "fa fa-android" of the icon that was selected, that's why now I want that according to what the textbox has the icon of the HTML list can be selected with JQuery or JS

    
asked by Ivxn 06.12.2017 в 22:08
source

2 answers

1

Hello friend , I share the functionality you are looking for ... the search engine will find matches of classes. I hope it works for you in your case you would modify the keyup event (you would remove it), and the $ (this) .val () would be the value you get from BD Regards! 

$(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>
    
answered by 08.12.2017 / 20:24
source
0

Thank you, for helping me to understand better, here is a snippet with the correction. If it does not work you can see it in link

UPDATED VERSION: link

As you did not mention the event, I put it on clicking again on the element: 

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

If you click on the same item, you "deselect" it according to the code you put on us.

UPDATE: Now also when changing the text is searched which is chosen, the event from the input is launched by removing the focus from it (blur) even if the "change" event was set. 

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>
    
answered by 07.12.2017 в 15:33
Fill the contents of an array between classes Store logeado username?