Comment appeler des icônes de plusieurs icônes dans jquery?

Question

J'ai ce code js;

$(document).ready(function() { 
     $.getJSON("Stations.php", function(jsonData){ 
     $.each(jsonData, function(key,value) { 
     $('#selectStation') 
    .append($("<option></option>") 
    .attr("value",key) 
    .text(value.name)); 

    }); 
}); 
}); 
function sta_callStation(sel){ 
    $('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty(); 
    $('#sta_numberOfIcons').empty(); 
    $.getJSON('Stations.php', function(station){ 

     $.each(station, function(sta_key, sta_value) { 

     if(sel.value==sta_key) 
     { 
      $.each(sta_value.passengers, function(j,passengers) 
     { 

      //$('#sta_numberOfIcons').append('<i class="icon-user" ></i>'); 
      var pas_icon = document.createElement("a"); 
      pas_icon.className = "icon-user"; 
      pas_icon.id='id_'+(j); 
      pas_icon.setAttribute('href', '#'); 
      pas_icon.setAttribute('rel', 'popover'); 
      //alert('id_'+(j)); 
      document.getElementById('sta_numberOfIcons').appendChild(pas_icon); 


     }); 
     } 
    }); 

    }); 
    } 

Voici une partie html:

Stations 
<select name="selectStation" id="selectStation" onchange="sta_callStation(this);"> 
</select> 

Tout d'abord lorsque la page est chargée ComboBox est rempli de Station 1, Station2 etc.Le quand je veux choisir l'un d'entre eux (1 agit-il , 2, 3, 4 ou 5) J'appelle la fonction sta_callStation. Je crée dynamiquement des icônes de personnes en leur donnant des attributs, par exemple leurs identifiants; id_1, id_2 etcBut après, comment puis-je les déclencher lorsque je passe la souris, devrais-je utiliser class ou id d'eux? Avant de choisir la station: https://docs.google.com/file/d/0B1RbKsJ4B8eoeW5wdWhLQW85QTQ/edit?usp=sharing Après avoir choisi une station (produit au hasard des passagers en php) https://docs.google.com/file/d/0B1RbKsJ4B8eoQmYwWVpYbno2NnM/edit?usp=sharing

Answer 1

Vous pouvez utiliser un cadre d'interface utilisateur côté client (par exemple Knockout.js.).

Si vous souhaitez garder votre interface utilisateur plutôt simple, alors oui comme vous l'avez dit, vous pouvez créer une classe avec des attributs de personne et une référence ajoutée à l'élément HTML de l'icône. Lorsque vous créez une instance de classe, liez la fonction de rappel HTML à la fonction de votre objet.

somethig comme ceci:

var PassInfo = function (name) 
{ 
    name: name, 
    onhover: function() 
    { 
    // do something special 
    } 
}; 

var passInstance = new PassInfo('passenger1'); 

$(pas_icon).hover(function() 
{ 
    passInstance.onhover(); 
});