Question

我在显示一些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"
        }
    }
}

}

Answer 1

尝试更改以下代码：

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

这个：

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

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

Answer 2

固定

问题是我在两次迭代数据。取出第一个.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');

Answer 3

您能否尝试使用此代码更改您的代码。它对我来说确实很好。

$.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');
        });

调用后两次显示JSON元素

3 个答案: