如何從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> 

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

Answer 1

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

如果你想保持你的UI非常簡單，那麼就像你說的那樣，你可以創建帶有人物屬性的類並附加引用圖標HTML元素。在創建類的實例時，將HTML回調函數鏈接到您的對象函數。

Somethig這樣的：

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

var passInstance = new PassInfo('passenger1'); 

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