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

Question

我在這里發布了一個非常廣泛的問題，對某些人來說這似乎是一個很大的挑戰。 但任何幫助將不勝感激！

我正在忙着構建一個小型Web應用程序，通過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文件的鏈接，因為它很長 -

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

 <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> 

JSON數據文件 CSS樣式表

Answer 1

正如評論中所述，請具體說明您的問題。

但我立即看到的一件事是你使用相同的名稱作為復選框的ID，不要這樣做，你應該確保它是唯一的。 如果你給tagpol的id，讓它看起來像這樣使它獨特：

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