如何在jquery中调用多个图标中的图标?

时间:2013-04-12 07:00:52

标签: javascript html css jquery icons

我有这些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=sharing

1 个答案:

答案 0 :(得分:0)

您可以使用一些客户端UI框架(例如Knockout.js)。

如果你想保持你的UI相当简单,那么就像你说的那样,你可以用person属性创建类,并附加对图标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();
});