Question

您好我正在尝试使用jquery xml + MySql和php编写标签云。我正在尝试使用jQuery构建一个HREF列表，然后用它们填充div。它们的样式取决于它们在db中找到的次数（COUNT（GenreName）为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();
});

此处还有一个XML示例

<result> − <row> <Count>5</Count> <GenreName>Action</GenreName> </row></result>

任何建议都将不胜感激。

Answer 1

我重构了你的代码如下：

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();
});

<强>问题：

~~val.freq来自哪里？我已将其包含在上面，但显然它不会按原样运行。~~ OP指出val.freq应为Count[i]。

一些指示：

在更改DOM时，您希望限制写入它的次数。因此，通常最好在内存中创建所有动态元素，然后一次性写入DOM。
如果您计划在初始数据处理后使用Genre[]或Count[]，则由于异步调用，它们仅在$.post()范围内可用。我建议将它们传递给另一个函数或在$.post()内使用它们。

修改

如果我将Genre[i]更改为GenreName[i]。
，请猜测它会有所帮助
我已经测试了上面的主要数据处理循环，将其翻录并用data形式的简单数组替换[ [genre0,count0], ... ]。它按预期工作，所以希望你能进一步调整它，如果这仍然不适合你。

Answer 2

function GetGenres (){
var Count = [];
var GenreName=[];
var tagcloudLink;
var loopCounter = 0;

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

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




$(data).find('row').each(function() {

                Genre[loopCounter] = $(this).find('Count').text();
            Count[loopCounter] = $(this).find('GenreName').text();
            tagCloudLink += "<a href=\"javascript:void(0)\"onclick=\"Genre_Clicked('"+Genre[loopCounter]+"')\">'"+ Genre[loopCounter] + "'</a>"; 

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

            tagCloudLink.appendTo(li); 

            li.children().css("fontSize",loopCounter ); 

            li.appendTo("#tagList");

                    loopCounter += 1;

                },'xml');



});


$(document).ready(function() {
      GetGenres();
});

未经测试但你会明白这个想法

jQuery TagCloud

2 个答案: