如何從jQuery中的多個圖標調用圖標？

Question

我有這些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); 


      });
        }
  });

  });
  }

這是一些html部分：

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

首先，當頁面被加載時，組合框充滿了Station 1，Station2等。當我想選擇其中一個（這是指1、2、3、4或5）時，我正在調用sta_callStation函數。我動態地創建人形圖標給他們一些屬性，例如他們的ID； id_1，id_2等。但是之后，如何在鼠標懸停時觸發它們，我應該使用它們的類或ID？ 選擇車站之前： https : //docs.google.com/file/d/0B1RbKsJ4B8eoeW5wdWhLQW85QTQ/edit?usp= sharing選擇一個車站后（PHP中隨機產生的乘客） https://docs.google.com/file/d/ 0B1RbKsJ4B8eoQmYwWVpYbno2NnM / edit？usp =分享

Answer 1

您可以使用一些客戶端UI框架（例如Knockout.js）。

如果您想使UI保持簡單，則可以像您所說的那樣，創建帶有person屬性的類，並將引用附加到圖標HTML元素上。 創建類的實例時，將HTML回調函數鏈接到您的對象函數。

這樣的東西：

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

var passInstance = new PassInfo('passenger1');

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