1

我在显示一些 JSON 对象时遇到了一些问题。如果使用显示对象，$.each()则它将在屏幕上显示两次。如果我不用$.each()来显示对象，那么它会显示一次。下面的示例显示标尺内容将被加载两次，但文本内容只会被加载一次。

JSON 文件只被调用一次。我使用 Firebug 进行了检查。

我使用 jQuery 1.8.0 并使用 history.js 插件

JSON 文件使用 jsonlint.com 进行验证。

我需要找出为什么元素被显示两次。任何帮助表示赞赏。谢谢

编码：

function JSONLoader(page)
{
    //The page is "about" page then..
    if(page == 'about')
    {

        $.getJSON('about.json', function(data, textStatus){
            var htmlRuler="";
            $.each(data.person, function(pageIndex, page){  

                //The ruler content will load in twice
                if(page.RulerDiv){
                    htmlRuler += '<ul>';
                    $.each(page.RulerDiv,function(rulerIndex, ruler){
                        htmlRuler += '<li><img class="'+ruler.imgClass+'" src="'+ruler.imgURI+'" alt="'+ruler.imgAlt+'" title="'+ruler.imgTitle+'"/></li>';                         
                    });
                    htmlRuler += '</ul>';
                }                       
                $('.RulerDiv').append(htmlRuler).fadeIn('slow');

                //This loads the text in once only.
                if(page.TextDiv){
                    var htmltext = '<p class="' + page.TextDiv.textClass+'">'+ page.TextDiv.Text + '</p>';      
                }
                $('.TextDiv').append(htmltext).fadeIn('slow');
            });
        });
    }
}

为此的一些示例 JSON。数组 RulerDiv 将被实现两次。

{
"person": {
    "page": {
        "RulerDiv": [
                {
                    "imgURI": "../img/rulerButton.png",
                    "imgTitle": "",
                    "imgClass": "hover whoRulerDivImg",
                    "imgAlt" : ""
                },
                {
                    "imgURI": "../img/rulerButton2.png",
                    "imgTitle": "",
                    "imgClass": "hover RulerDivImg",
                    "imgAlt" : ""
                }
            ],
        "TextDiv": {
            "wText" : "He is alive",
            "textClass" : "fontClass"
        }
    }
}

}

4

3 回答 3

4

尝试更改以下代码：

if(page.RulerDiv){
   htmlRuler += '<ul>';

对于这个：

htmlRuler = '';
if(page.RulerDiv){
   htmlRuler += '<ul>';

因为在我看来，您htmlRuler在.each()循环内附加到相同的变量，而没有清除上一次迭代的内容。

于 2012-10-05T11:08:03.700 回答
3

固定的

问题是我对数据进行了两次迭代。取出第一个.each()并将代码更改为以下代码可修复此错误。

$.getJSON('about.json', function(data, textStatus){
            var htmlRuler="";  

            if(data.person.page.RulerDiv){
                htmlRuler += '<ul>';
                $.each(data.person.page.RulerDiv,function(rulerIndex, ruler){
                    htmlRuler += '<li><img class="'+ruler.imgClass+'" src="'+ruler.imgURI+'" alt="'+ruler.imgAlt+'" title="'+ruler.imgTitle+'"/></li>';                         
                });
                htmlRuler += '</ul>';
            }                       
            $('.RulerDiv').append(htmlRuler).fadeIn('slow');
于 2012-10-05T13:01:15.767 回答
1

您能否尝试使用此代码更改您的代码。它对我来说看起来不错。

$.each(data.person, function(pageIndex, page){  
   // try to change these only and see        
    var htmlRuler = "";
             if(page.RulerDiv){
                htmlRuler = $('<ul>').clone();
                $.each(page.RulerDiv,function(rulerIndex, ruler){
                    var imgDom = $('<img>').clone(); 
                var liDom = $('<li>').clone();
                    $('<img>').addClass(ruler.imgClass).attr({'src':ruler.imgURI,'alt':ruler.imgAlt,'title':ruler.imgTitle})
                              .appendTo($('<li>').appendTo(htmlRuler));
                });
            }                       
            $('.RulerDiv').append(htmlRuler).fadeIn('slow');

            //This loads the text in once only.
            if(page.TextDiv){
                var htmltext = '<p class="' + page.TextDiv.textClass+'">'+ page.TextDiv.Text + '</p>';      
            }
            $('.TextDiv').append(htmltext).fadeIn('slow');
        });
于 2012-10-05T12:06:02.080 回答