Php jQuery标记云

嗨，我正在尝试使用jQueryXML+MySql和php编写一个标记云。我正在尝试使用jQuery构建HREF的列表，然后用它们填充一个div。根据在数据库中找到它们的次数（COUNT（GenreName）as COUNT），它们的样式会有所不同。该div未填充该列表。我想知道我创建列表的方式是否有问题。。。或者我在我的方法论中偏离了方向。
到目前为止，我所做的是

function GetGenres (){
var Count = array();
var GenreName=array();
var tagcloudLink

$.post("tagcloud.php", function(data){

    //create list for Genre tags
    $("<ul>").attr("id", "tagList").appendTo("#tagCloud");

    //create list item
    var li = $("<li>");

    $('row', data).each(function(i){

       Genre[i] = $(this).find("GenreName").text();
       Count[i] = $(this).find("Count").text();

        tagCloudLink += "<a href=\"javascript:void(0)\"onclick=\"Genre_Clicked('"+Genre[i]+"')\">'"+ Genre[i] + "'</a>"; 

        tagCloudLink.appendTo(li);

        //set tag size
        li.children().css("fontSize", (Count[i] / 10 < 1) ? Count[i] / 10 + 1 + "em": (Count[i] / 10 > 2) ? "2em" : val.freq / 10 + "em");

        //add to list
        li.appendTo("#tagList");
    });
}, 'xml');
}
$(document).ready(function() {
      GetGenres();
});

函数GetGenres（）{ var Count=array（）； var GenreName=array（）； var tagcloudLink $.post（“tagcloud.php”），函数（数据）{ //创建流派标签列表 $（“

”）.attr（“id”、“标记列表”）.appendTo（“#tagCloud”）； //创建列表项 var li=$（“
• ”）； $（“行”，数据）。每个（函数（i）{ 类型[i]=$（this）.find（“GenreName”）.text（）； Count[i]=$（this.find（“Count”）.text（）； tagCloudLink+=“”； tagCloudLink.appendTo（li）； //设置标记大小 li.children（）.css（“fontSize”，（Count[i]/10<1）？Count[i]/10+1+“em”：（Count[i]/10>2）？“2em”：val.freq/10+“em”）； //添加到列表中 li.附录（“标签列表”）； }); }“xml”）； } $（文档）.ready（函数（）{ GetGenres（）； }); 这里还有一个XML示例

  
  −
  5.
  行动
  

  如有任何建议，将不胜感激
  我对您的代码进行了如下重构：

  function GetGenres(){   
      $.post('tagcloud.php', function(data){
          //create list for Genre tags
          var $ul = $('<ul>').attr('id', 'tagList');
  
          var Count = [];
          var GenreName = [];
  
          $(data).find('row').each(function(i){
              GenreName[i] = $(this).find('GenreName').text();
              Count[i] = $(this).find('Count').text();
  
              var $li = $('<li>');
  
              if( (Count[i] / 10) < 1 ) {
                  var fontSize = (Count[i] / 10 + 1) + 'em';
              } else if( (Count[i] / 10) > 2 ) {
                  var fontSize = '2em';
              } else {
                  var fontSize = (Count[i] / 10) + 'em';
              }
  
              var $tagCloudLink = $('<a href="javascript:void(0)">')
                  .text(GenreName[i])
                  .css('font-size', fontSize)
                  .bind('click', function(){
                      Genre_Clicked( GenreName[i] )
                  });
  
              // add to list item
              $tagCloudLink.appendTo($li);
  
              // add to main list
              $li.appendTo($ul);
          });
  
          // add to container div
          $ul.appendTo('#tagCloud');
      }, 'xml');
  }
  
  $(document).ready(function(){
      GetGenres();
  });
  

  函数GetGenres（）{
  $.post（'tagcloud.php'，函数（数据）{
  //创建流派标签列表
  var$ul=$（“
  ”）.attr（'id'，'tagList'）；
  var计数=[]；
  var GenreName=[]；
  $（数据）。查找（'row'）。每个（函数（i）{
  GenreName[i]=$（this.find（'GenreName'）.text（）；
  Count[i]=$（this.find（'Count'）.text（）；
  变量$li=$（“
  ”）；
  如果（（计数[i]/10）<1）{
  var fontSize=（计数[i]/10+1）+“em”；
  }如果（（计数[i]/10）>2）{
  var fontSize='2em'；
  }否则{
  var fontSize=（计数[i]/10）+“em”；
  }
  变量$tagCloudLink=$（“”）
  .text（GenreName[i]）
  .css（'font-size'，fontSize）
  .bind（'单击'，函数（））{
  已单击类型（GenreName[i]）
  });
  //添加到列表项
  $tagCloudLink.appendTo（$li）；
  //添加到主列表
  $li.appendTo（$ul）；
  });
  //添加到容器div
  $ul.appendTo（“#tagCloud”）；
  }“xml”）；
  }
  $（文档）.ready（函数（）{
  GetGenres（）；
  });
  

  问题：

  • val.freq

    来自哪里？我已经把它包括在上面，但显然它不会像现在这样工作。OP注意到

    val.freq

    应该是

    Count[i]

  一些指针：
  • 在对DOM进行更改时，您希望限制写入DOM的次数。因此，通常最好在内存中创建所有动态元素，然后一次性写入DOM
  • 如果您计划在初始数据处理后使用

    Genre[]

    或

    Count[]

    ，由于异步调用，它们将仅在

    $.post（）

    的范围内可用。我建议将它们传递给另一个函数或在

    $.post（）中使用它们

  编辑：
  • 我想如果我把

    Genre[I]

    改成

    GenreName[I]

    会有帮助
  • 我已经测试了上面的主数据处理循环，将其剥离出来，并用一个简单的数组替换

    [[genre0，count0]，…]

    。它的工作如预期，所以希望你可以进一步适应它，如果这仍然不适合你
  我对您的代码进行了如下重构：

  function GetGenres(){   
      $.post('tagcloud.php', function(data){
          //create list for Genre tags
          var $ul = $('<ul>').attr('id', 'tagList');
  
          var Count = [];
          var GenreName = [];
  
          $(data).find('row').each(function(i){
              GenreName[i] = $(this).find('GenreName').text();
              Count[i] = $(this).find('Count').text();
  
              var $li = $('<li>');
  
              if( (Count[i] / 10) < 1 ) {
                  var fontSize = (Count[i] / 10 + 1) + 'em';
              } else if( (Count[i] / 10) > 2 ) {
                  var fontSize = '2em';
              } else {
                  var fontSize = (Count[i] / 10) + 'em';
              }
  
              var $tagCloudLink = $('<a href="javascript:void(0)">')
                  .text(GenreName[i])
                  .css('font-size', fontSize)
                  .bind('click', function(){
                      Genre_Clicked( GenreName[i] )
                  });
  
              // add to list item
              $tagCloudLink.appendTo($li);
  
              // add to main list
              $li.appendTo($ul);
          });
  
          // add to container div
          $ul.appendTo('#tagCloud');
      }, 'xml');
  }
  
  $(document).ready(function(){
      GetGenres();
  });
  

  函数GetGenres（）{
  $.post（'tagcloud.php'，函数（数据）{
  //创建流派标签列表
  var$ul=$（“
  ”）.attr（'id'，'tagList'）；
  var计数=[]；
  var GenreName=[]；
  $（数据）。查找（'row'）。每个（函数（i）{
  GenreName[i]=$（this.find（'GenreName'）.text（）；
  Count[i]=$（this.find（'Count'）.text（）；
  变量$li=$（“
  ”）；
  如果（（计数[i]/10）<1）{
  var fontSize=（计数[i]/10+1）+“em”；
  }如果（（计数[i]/10）>2）{
  var fontSize='2em'；
  }否则{
  var fontSize=（计数[i]/10）+“em”；
  }
  变量$tagCloudLink=$（“”）
  .text（GenreName[i]）
  .css（'font-size'，fontSize）
  .bind（'单击'，函数（））{
  已单击类型（GenreName[i]）
  });
  //添加到列表项
  $tagCloudLink.appendTo（$li）；
  //添加到主列表
  $li.appendTo（$ul）；
  });
  //添加到容器div
  $ul.appendTo（“#tagCloud”）；
  }“xml”）；
  }
  $（文档）.ready（函数（）{
  GetGenres（）；
  });
  

  问题：

  • val.freq

    来自哪里？我已经把它包括在上面，但显然它不会像现在这样工作。OP注意到

    val.freq

    应该是

    Count[i]

  一些指针：
  • 在对DOM进行更改时，您希望限制写入DOM的次数。因此，通常最好在内存中创建所有动态元素，然后一次性写入DOM
  • 如果您计划在初始数据处理后使用

    Genre[]

    或

    Count[]

    ，由于异步调用，它们将仅在

    $.post（）

    的范围内可用。我建议将它们传递给另一个函数或在

    $.post（）中使用它们

  编辑：
  • 我想如果我把

    Genre[I]

    改成

    GenreName[I]

    会有帮助
  • 我已经测试了m