Question

简介

我目前正在开发一个具有多种帖子格式的平台，例如文本，链接，位置等。每种类型的内容都有自己的标记。因此，文本具有用于显示标题和文本的HTML标记，位置具有用于显示地图e.d

的标记

数据存储在JSON对象中。

代码/问题

我现在拥有的是，Ajax将遍历我的内容并填写空白。这工作正常，但问题是数据将始终附加到format-text.html标记。这不是我想要的，我希望有一个代码来检查它是什么类型的对象，并根据它将选择正确的标记文件的帖子类型。

每个标记都存储在单独的HTML文件中。与format-text.html和format-location.html一样。

代码：

// Declare variables
var root = this; // This in this function

    $.ajax({
        url: 'api/videoData.js',
        dataType: 'json',
        success: function(data) {

            $.get('directives/format-text.html', function(response){
                console.log('succes');
            })

            .done(function (response) {
                // console.dir(response);
                var raw_model = response;
                var loadOnScroll = false;

                // Start loop
                var modelParts = data.content.length;
                var modelCount = 0;

                function loadData() {

                    for (var i = 0; i < modelParts; i++) {

                        // if (data.content[i].type == 'normal') {

                            model = $(raw_model);
                            var dataID = data.content[modelCount].timeTrigger;
                            var dataIndex = modelCount;

                            model.attr('data-id', dataID);
                            model.attr('data-index', dataIndex);

                            // console.log(data.content[modelCount].type);
                            model.find('.format').addClass(' ' + data.content[modelCount].type);
                            model.find('h4').html(data.content[modelCount].subtitle);
                            model.find('h3').html(data.content[modelCount].title).wrap('<a href="#' + '' + '"></a>');
                            model.find('p').html(data.content[modelCount].text);
                            model.find('.contentHolder').append('<a href="' + data.content[modelCount].readmore + '" target="_blank" class="button primary">Read more</a>');

                            $(model).insertBefore('.featured .footer');

                        // }

                        modelCount++;
                        console.log(modelCount);
                    }

                    $('body').removeClass('loading'); 

                } loadData();

            })

            .fail(function (response) {
                console.dir(response); 
            });

        },

        error: function(data) { 
            console.log(data);
            console.log('Houston, we have a problem!');
        }


    });

JSON：

{
        "title":    "Hello World JSON",
        "content":  [
            {
                "type" :        "location",
                "timeTrigger":  25,
                "title":        "London",
                "google":       "https://www.google.nl/maps/place/Londen,+Verenigd+Koninkrijk/@51.5340878,-0.0978221,12z/data=!4m2!3m1!1s0x47d8a00baf21de75:0x52963a5addd52a99"
            },{
                "type":         "text",
                "timeTrigger":  34,
                "title":        "Hello World!",
                "subtitle":     "Format",
                "picture" :     "images/content/helloworld.png",
                "text":         "Lorem ipsum dolar ismat.",
                "readmore":     "https://www.google.nl/"
            },{
                "type":         "text",
                "timeTrigger":  34,
                "title":        "Hello World 2!",
                "subtitle":     "Format",
                "picture" :     "images/content/helloworld_two.png",
                "text":         "Lorem ipsum dolar ismat 2.",
                "readmore":     "https://www.google.nl/"
            },{
                "type" :        "location",
                "timeTrigger":  25,
                "title":        "London",
                "google":       "https://www.google.nl/maps/place/Londen,+Verenigd+Koninkrijk/@51.5340878,-0.0978221,12z/data=!4m2!3m1!1s0x47d8a00baf21de75:0x52963a5addd52a99"
            },{
                "type":         "text",
                "timeTrigger":  34,
                "title":        "Hello World!",
                "subtitle":     "Format",
                "picture" :     "images/content/helloworld.png",
                "text":         "Lorem ipsum dolar ismat.",
                "readmore":     "https://www.google.nl/"
            }
    ]
}

HTML标记：

<div class="article text">
    <span class="alignRight format"></span>

    <div class="contentHolder">
        <h4></h4>
        <h3></h3>
        <p></p>
    </div><!-- End div.contentHolder -->

</div><!-- End div.article text -->

步骤：

我认为代码应该像下面的程序一样工作： 1.获取JSON数据 2.遍历内容 3.检查对象的类型 4.如果是文本，请使用format-text.html 5.如果是位置，请使用format-location.html

通过生成真正的html输出，我想添加不依赖于帖子类型的索引。因此，如果订单是 - 文本，文本，位置，文本 - 索引应为0,1,2,3

我注意一些建议。如果有任何问题请告诉我。提前谢谢。

如何根据Ajax的内容类型获得正确的格式？

0 个答案: