Javascript 如何使用CSS类动态创建图标？

我使用Ajax getJSON函数从php文件中获取乘客id。由来自php的乘客数量定义的图标数量以及与外观相同的图标必须显示在html页面中。这些图标必须可以调用，因为我使用的是bootstap popover，当用户看到某个图标时，必须在弹出窗口中显示信息abaot passsenger。 在这里，我初始化组合框

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

  });
});
});

这是我尝试过的js代码，它是从html中的选择选项调用来选择站点的：

function sta_callStation(sel){
  $('#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>')
          });
        }
  });

  }
  );
  }

sel是从Stations.php将station idfrom 1传递到5的参数，我从select选项标记调用此函数。 从sta_value.passengers中，仅返回从1到20的数字，为每个乘客图标返回随机生成的数字。 这里的图标具有相同的属性，但我希望它们根据乘客id而有所不同，因为之后我将调用它们来实现popover功能。 这里是html代码部分：

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

      <div id="noOfPassengers"><strong>İstasyondaki Yolcu Sayısı:</strong></div>

      <a href="#" id="sta_numberOfIcons" rel="popover" class="pas_icon"> </a>

---

谢谢。

你能重写这段代码吗？这样，代码库中的代码就少了，而更多地显示了发生了什么？什么是sel，什么是j，等等。只要把你的变量重命名为至少能暗示它们的用途的东西，就可以让人们更容易地评论你的方法可能需要修改的地方。@Mike'Pomax'Kamermans我打断了我的问题你知道吗？