我的所有功能似乎都不正确

Question

我在这里发布了一个非常广泛的问题，对某些人来说这似乎是一个很大的挑战。但任何帮助将不胜感激！

我正在忙着构建一个小型网络应用程序，通过AJAX和JSON显示不同的新闻文章。

我已经制作了一个搜索功能，它还会根据用户输入填充各种帖子。我现在面临的问题是我正在尝试构建的Lazy Loading。但我认为问题实际上是在我执行Lazy Load函数之前开始的。

当我在屏幕底部上方100像素处执行getposts函数时，我的getposts函数似乎多次追加而不是仅使用新的数据集追加一次。

更具体地说，这段代码 -

//LAZY LOAD
$(function ($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            getposts(str);
            changePage = '2';
        }
    });
});

然后，这会给我一个附加多个页面的结果，我认为它与getposts函数有关。

我希望有更多知识的人可以看看我的代码，也许可以筛选它并批评我做错了什么。也许建议一个更好/正确的方法来做某些事情。

我的文章随onclick事件而变化，然后其他函数通过Ajax和Jquery来填充内容。

我非常感谢您提供的任何帮助：）

请看一下我在下面插入的代码 -

我还插入了一个指向我的JSON文件的链接，供您使用 -

进行测试

这是CSS文件的链接，因为它很长 -

＆＃13;

＆＃13;

var newsData;
var eventsData;
var nightData;
var dineData;
var outData;
var videoData;
var data;
var str = 'news';
var changePage = '1';

function getposts(str) {
    var baseUrl = 'http://www.capetownetc.com/api/get_category_posts/?slug=';
    var pageCount = '&count=10&page=';
    
    $.ajax({
        type: 'GET'
        , url: baseUrl + str + pageCount + changePage
        , data: {
            get_param: 'value'
        }
        , dataType: 'json'
        , success: function postData(data) {
            
            if (str == 'news') {
                newsData = data;
                displayPosts(newsData);
            }
            if (str == 'events') {
                eventsData = data;
            }
            if (str == 'nightlife%20culture') {
                nightData = data;
            }
            if (str == 'dine') {
                dineData = data;
            }
            if (str == 'family%20fun') {
                outData = data;
            }
            if (str == 'videos') {
                videoData = data;
            }
        }
    });
}
getposts('news');
getposts('events');
getposts('nightlife%20culture');
getposts('dine');
getposts('family%20fun');
getposts('videos');

function displayPosts(str) {
    data = str;
    if (str == 'news') {
        data = newsData;
    }
    if (str == 'events') {
        data = eventsData;
    }
    if (str == 'nightlife%20culture') {
        data = nightData;
    }
    if (str == 'dine') {
        data = dineData;
    }
    if (str == 'family%20fun') {
        data = outData;
    }
    if (str == 'videos') {
        data = videoData;
    }
    var maxLength2 = 6;
    var maxLength = 130;
    var imgTitle = {};
    var imgThumb = {};
    var cat = {};
    var ex = {};
    var text = {};
    var time = {};
//    $('#post-cont').empty();
    
    $("#post-cont").append('<div class="ip1 full-post-img" id="card" attr-index="0"><div class="ip1 full-post-info"><a class="ip1 post-cat">Breaking News</a><h2 class="ip1 text-heading" id="ip1Heading">' + data.posts[0].title + '</h2><p class="ip1 post-source" id="ip1Source">' + data.posts[0].date + '</p></div><span class="ip1 main-card-img1" id="ip1img"></span></div>');
    
    $('#ip1img').css('background-image', 'url(' + data.posts[0].thumbnail_images.medium.url + ')');

    $.each(data.posts, function (i, item) {
        
        //TITLE
        imgTitle = item.title.replace('Newsflash:', '');
        console.log(imgTitle);
        
        //THUMBNAIL
        imgThumb = item.thumbnail_images.medium.url;
        
        //CATEGORY
        cat = item.categories[0].title;
        
        //EXCERPT
        ex = item.excerpt.substr(0, maxLength);
        
        //CONTENT
        text = item.content;
        
        //TIME
        time = item.date;
        
        if (i > 0){
         $("#post-cont").append('<div class="p full-post-text" id="card" attr-index="' + i +'"><div class="p1 text-post-img"><span class="p1 card-img1" id="p1Img" style="background-image:url(' + imgThumb + ');"></span><a class="p1 post-cat">' + cat + '</a> </div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1Heading">' + imgTitle + '</h2>' + ex + '<p class="lay2 post-source">' + time + '</p></div></div>');   
        }
           
        //    POST POPULATE ***
    $(document).on('click', '#card', function(i, item) {
        $('#cont').css('left', '0px');
        $('#cont').css('position', 'relative');
        $('#cont').css('top', '0');
        $('#cont').css('display', 'block');
        $('#swipe').css('display', 'none');
        $('#post-header').css('left', '0px');
        $('#post-cont').css('left', '-9999px');
        $('#slider').css('left', '-9999px');
        $('#slider').css('display', 'none');
        
        $(window).scrollTop(0, 0);
        
        var ind = $(this).attr("attr-index");
        imgTitle = data.posts[ind].title;
        
        imgThumb = data.posts[ind].thumbnail_images.full.url;
        
        text = data.posts[ind].content;
        
        var maxLength2 = 6;
        time = data.posts[ind].date.substr(10, maxLength2);
        
        $('#cont').html('<div class="content-container"><div class="header-img"><span id="para-img"></span></div><div class="pageContent"><h1 class="post1 header">' + imgTitle + '</h1><p class="lay2 post-source">' + time + '</p>' + text + '<div class="post inter-tags"><ul class="post-tag-list" id="post-inter-tags"></ul></div></div></div>');
        
        $('#para-img').css('background-image','url(' + imgThumb + ')');
        
        $.each(data.posts, function (key, value) {
            var cat = data.posts[ind].tags[key].title;
            var apCat = '<li><input type="checkbox" id="tagPol" value=" " class="tag"><label             for="tagPol" class="inter-label">' + cat + '</label></li>';
            $('#post-inter-tags').append(apCat);
        });
        
    });
        
    });
    
} //End of displayPosts

//LAZY LOAD
$(function ($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            getposts(str);
            changePage = '2';
        }
    });
});

//SEARCH FUNCTION
$('#sLoad').css('opacity', '0');
$("#search-btn").click(function (e) {
    var userText = $.trim($('#searchArea').val());
    $('.full-post-img').css('display', 'none');
    $('.full-post-text').css('display', 'none');
    $('#op').attr('checked', false);
    $.getJSON('http://www.capetownetc.com/api/get_search_results/?search=' + userText, {
        srsearch: userText
        , action: "query"
        , list: "search"
        , format: "json"
    , }, function (data) {
        if (userText.length === 0) {
            $("body").append("<p class='results'>Please enter a keyword</p>");
            $('#sLoad').css('opacity', '0');
        }
        else {
            $("#swipe").empty();
            var imgTitle = {};
            var imgThumb = {};
            var cat = {};
            var ex = {};
            var time = {};
            var maxLength = 130;
            var maxLength2 = 6;
            $.each(data.posts, function (i, item) {
                imgTitle = item.title.replace('Newsflash:', '');
                console.log(imgTitle);

                //THUMBNAIL CHECK
                if (item.thumbnail_images) {
                    imgThumb = item.thumbnail_images.full.url;
                }
                else {
                    imgThumb = item.thumbnail;
                }
                
                //CATERGORY
                if (item.categories[0]) {
                    cat = item.categories[0].title;
                }
                else {
                    cat = 'Blog';
                }
                //EXCERPT
                ex = item.excerpt.substr(0, maxLength);
                
                //TIME
                time = item.date;

                $("#swipe").append('<div class="p full-post-text" id="search-result" attr-index="' + i +'"><div class="p1 text-post-img"><span class="p1 card-img1" id="p1Img" style="background-image:url(' + imgThumb + ');"></span><a class="p1 post-cat">' + cat + '</a> </div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1Heading">' + imgTitle + '</h2>' + ex + '<p class="lay2 post-source">' + time + '</p></div></div>');
                
                $(document).on('click', '#search-result', function(i, item) {
                    $('#cont').css('left', '0px');
                    $('#cont').css('position', 'relative');
                    $('#cont').css('top', '0');
                    $('#cont').css('display', 'block');
                    $('#swipe').css('display', 'none');
                    $('#post-header').css('left', '0px');
                    $('#post-cont').css('left', '-9999px');
                    $('#slider').css('left', '-9999px');
                    $('#slider').css('display', 'none');

                    $(window).scrollTop(0, 0);

                    var ind = $(this).attr("attr-index");
                    imgTitle = data.posts[ind].title;

                    imgThumb = data.posts[ind].thumbnail_images.full.url;

                    text = data.posts[ind].content;

                    time = data.posts[ind].date.substr(10, maxLength2);

                    $('#cont').html('<div class="content-container"><div class="header-img"><span id="para-img"></span></div><div class="pageContent"><h1 class="post1 header">' + imgTitle + '</h1><p class="lay2 post-source">' + time + '</p>' + text + '<div class="post inter-tags"><ul class="post-tag-list" id="post-inter-tags"></ul></div></div></div>');

                    $('#para-img').css('background-image','url(' + imgThumb + ')');

                    $.each(data.posts, function (key, value) {
                        var cat = data.posts[ind].tags[key].title;
                        var apCat = '<li><input type="checkbox" id="tagPol" value=" " class="tag"><label             for="tagPol" class="inter-label">' + cat + '</label></li>';
                        $('#post-inter-tags').append(apCat);
                    });

                });
                
            });
        }
        //SEARCH SUCCESS
        $('#sLoad').css('opacity', '0');
        $('#results').css('display', 'inline-block');
        $('#search-img').css('display', 'none');
        $('#iSlider').css('display', 'none');
        $('#searchBR').css('display', 'block');
    });
});

$('textarea').keydown(function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        $("#search-btn").click();
    }
});

$('#searchBR').click(function () {
    $('#swipe').html('<div class="post-cont" id="post-cont"><div class="ip1 full-post-img"><a class="link-click" id="post1"></a><div class="ip1 full-post-info"> <a class="ip1 post-cat">Breaking News</a><h2 class="ip1 text-heading" id="ip1Heading"></h2><p class="ip1 post-source" id="ip1Source"> / </p></div><span class="ip1 main-card-img1" id="ip1img"></span></div><div class="p1 full-post-text"><a class="p1 link-click" id="post2" target="_blank"></a><div class="p1 text-post-img"><span class="p1 card-img1" id="p1Img"></span><a class="p1 post-cat">Sport</a></div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1Heading"></h2><p class="p1 text-post-desc" id="p1Desc"></p><p class="p1 post-source" id="p1Source"> / </p></div></div><div class="p2 full-post-text"><a class="p2 link-click" id="post3" target="_blank"></a><div class="p2 text-post-img"><span class="p2 card-img2" id="p2Img"></span><a class="p2 post-cat">Local News</a> </div><div class="p2 full-text-info"><h2 class="p2 text-heading" id="p2Heading"></h2><p class="p2 text-post-desc" id="p2Desc"></p><p class="p2 post-source" id="p2Source"> / </p></div></div><div class="p3 full-post-text"><a class="p3 link-click" id="post4" target="_blank"></a><div class="p3 text-post-img"><span class="p3 card-img3" id="p3Img"></span><a class="p3 post-cat">Health</a> </div><div class="p3 full-text-info"><h2 class="p3 text-heading" id="p3Heading"></h2><p class="p3 text-post-desc" id="p3Desc"></p><p class="p3 post-source" id="p3Source"> / </p></div></div></div>');
    displayPosts(str);
    $('#searchBR').css('display', 'none');
    $('#results').css('display', 'none');
    $('#iSlider').css('display', 'inline-block');
    $('#search-img').css('display', 'inline-block');
    $('#op').attr('checked', false);
});
$('#searchB').click(function () {
    $('#results').css('display', 'none');
    $('#searchArea').val('');
});
$("#search-btn").click(function () {
    $('#sLoad').css('opacity', '1');
});

        //***PROBLEM AREA***

//GET CATEGORIES
var catNames = {};

function getAllCat() {
    $.ajax({
        type: 'GET'
        , url: 'http://www.capetownetc.com/api/get_category_index/'
        , data: {
            get_param: 'value'
        }
        , dataType: 'json'
        , success: function (data) {
            $.each(data.categories, function (key, item) {
                catNames[key] = item.title;
                $('#tag-list').append('<li><input type="checkbox" id="tagPol" value=" " class="tag"><label for="tagPol" class="inter-label">' + catNames[key] + '</label></li>');
            });
        }
    });
}
getAllCat();

//    SWIPE EVENT ****
$('#swipe').bind('swipeleft', function () {
    if (str == 'news') {
        displayPosts('events');
        str = 'events';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(2) p').addClass("current");
    }
    else if (str === 'events') {
        displayPosts('nightlife%20culture');
        str = 'nightlife%20culture';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(3) p').addClass("current");
    }
    else if (str === 'nightlife%20culture') {
        displayPosts('dine');
        str = 'dine';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(4) p').addClass("current");
        if ($(window).width() < 370) {
            $('#interestSlider').animate({
                scrollLeft: 330
            }, 600);
        }
        else {
            $('#interestSlider').animate({
                scrollLeft: 260
            }, 600);
        }
    }
    else if (str === 'dine') {
        displayPosts('family%20fun');
        str = 'family%20fun';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(5) p').addClass("current");
        if ($(window).width() < 370) {
            $('#interestSlider').animate({
                scrollLeft: 330
            }, 600);
        }
        else {
            $('#interestSlider').animate({
                scrollLeft: 260
            }, 600);
        }
    }
    else if (str === 'family%20fun') {
        displayPosts('videos');
        str = 'videos';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(6) p').addClass("current");
    }
    console.log(str);
});
$('#swipe').bind('swiperight', function () {
    if (str == 'events') {
        displayPosts('news');
        str = 'news';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(1) p').addClass("current");
    }
    else if (str === 'nightlife%20culture') {
        displayPosts('events');
        str = 'events';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(2) p').addClass("current");
        if ($(window).width() < 370) {
            $('#interestSlider').animate({
                scrollLeft: -330
            }, 600);
        }
        else {
            $('#interestSlider').animate({
                scrollLeft: -250
            }, 600);
        }
    }
    else if (str === 'dine') {
        displayPosts('nightlife%20culture');
        str = 'nightlife%20culture';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(3) p').addClass("current");
        if ($(window).width() < 370) {
            $('#interestSlider').animate({
                scrollLeft: -330
            }, 600);
        }
        else {
            $('#interestSlider').animate({
                scrollLeft: -250
            }, 600);
        }
    }
    else if (str === 'family%20fun') {
        displayPosts('dine');
        str = 'dine';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(4) p').addClass("current");
    }
    else if (str === 'videos') {
        displayPosts('family%20fun');
        str = 'family%20fun';
        $(".i-item.current").removeClass("current");
        $('.interest-list li:nth-child(5) p').addClass("current");
    }
});

//Making current styles for interest slider
$('.i-item').click(function () {
    if (!$(this).hasClass("current")) {
        $(".i-item.current").removeClass("current");
        $(this).addClass("current");
    }
});

//POST PAGE BACK BUTTON
$('.back').click(function () {
    $('#cont').css('left', '-9999px');
    $('#cont').css('display', 'none');
    $('#post-cont').css('left', '0px');
    $('.interest-slider').css('left', '0px');
    $('#swipe').css('display', 'block');
    $('#post-header').css('left', '-9999px');
    $('iframe').attr('src', '');
});

//LOADING SCREEN
$(document).ajaxComplete(function () {
    $("#loading").delay(1000).fadeOut("slow");
});

//INTEREST MENU OPTION
$('.interests').click(function () {
    $('.inter-cont').css('left', '0px');
});

//INTEREST MENU OPTION - BACK
$('.interLogo').click(function () {
    $('.inter-cont').css('left', '-9999px');
});

//Parallax on post page
$(window).scroll(function () {
    var scrolledY = $(window).scrollTop();
    $('#para-img').css('background-position', 'center ' + ((scrolledY)) + 'px');
});
//$.each(data.categories, function(key, item){
//                catNames[key] = item.title;
//                $('#tag-list').append('<li><input type="checkbox" id="tagPol" value=" " class="tag"><label for="tagPol" class="inter-label">' + catNames[key] + '</label></li>');
//            });
//ANIMATE SEARCH RESULTS
//$("#searchR").hide();
//$('#searchArea').bind('input propertychange type', function() {
//    if (!$.trim($("#searchArea").val())) {
//       $("#searchR").hide(500);
//    }
//    else{
//     $("#searchR").show(500);   
//    }
//});
//    FOR LOOP TO GET ALL CATEGORIES
//        $.each(data.posts , function(key , value){ // First Level
//        $.each(value.tags , function(k , v ){  // The contents inside stars
//            $('#post-inter-tags').append('<li><input type="checkbox" id="tagPol" value=" " class="tag"><label             for="tagPol" class="inter-label">' + v.title + '</label></li>');
//        });     
//        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="iSlider" id="iSlider">
                    <ul class="interest-list" id="interestSlider">
                        <li><p onclick="displayPosts('news'); str = 'news'" class="i-item current">Home</p></li>
                        <li><p onclick="displayPosts('events'); str = 'events'" class="i-item">Events</p></li>
                        <li><p onclick="displayPosts('nightlife%20culture'); str = 'nightlife%20culture'" class="i-item">Nightlife</p></li>
                        <li><p onclick="displayPosts('dine'); str = 'dine'" class="i-item">Dine</p></li>
                        <li><p onclick="displayPosts('family%20fun'); str = 'family%20fun'" class="i-item">Outdoors</p></li>
                        <li><p onclick="displayPosts('videos'); str = 'videos'" class="i-item">Video</p></li>
                    </ul>
                </div>

＆＃13;

＆＃13;

＆＃13;

JSON Data File CSS Stylesheet

Answer 1

正如评论中所述，请具体说明您的问题。

但我立即看到的一件事是你使用相同的名称作为复选框的ID，不要这样做，你应该确保它是唯一的。你在哪里给出了tagpol的id，让它看起来像这样使它独特：

 <th:block th:with="Reference=${op.jpText('$.u_reference')}">
       <Incident id="Reference">enter code here
       <Incident>