我的脚本出现问题。我要做的是首先在按钮点击中查看新帖子,然后进入视图,然后重置原始容器(这可行)。
我面临的问题是我想在滚动(自定义字段)上加载帖子内容。我的脚本似乎运行但加载帖子内容时出现问题。请参阅下面的代码。
HTML: -one.html交
<div id="default" class="main">
<div id="imageContainer" style="background:url(images/bg.jpg) no-repeat center center; background-size:cover;">
<a href="http://www.example.com/next-post" class="button"></a>
</div>
<div id="introContentContainer" class="content">
<div class="postContent-1 post">
<h1>heading</h1>
<p>paragraph.</p>
</div>
</div>
<div id="postContentContainer" class="content"></div>
</div>
<div id="load" class="direction"></div>
HTML: 下一post.html
<div id="default" class="main">
<div id="imageContainer" style="background:url(images/bg2.jpg) no-repeat center center; background-size:cover;">
<a href="http://www.example.com/post-one" class="button"></a>
</div>
<div id="introContentContainer" class="content">
<div class="postContent-1 post">
<h1>heading</h1>
<p>paragraph.</p>
</div>
</div>
<div id="postContentContainer" class="content">
<div class="postContent-2 post">
<h2>Content Two</h2>
<p>para 2</p>
</div>
<div class="postContent-3 post">
<h2>Content Three</h2>
<p>para 3</p>
</div>
<div class="postContent-4 post">
<h2>Content Four</h2>
<p>para 4</p>
</div>
</div>
</div>
<div id="load" class="direction"></div>
JQUERY:
var processing;
var count = 0;
$(document).ready(function(){
$.ajaxSetup({cache:false});
$('body').on('click', 'a', function(e){
e.preventDefault();
var self = this;
history.pushState({ path: this.path }, '', this.href);
history.replaceState({ path: this.path }, '', this.href);
RightSlide(self);
return false;
});
function RightSlide(self) {
//Unbind Scroll Event
$(window).unbind('scroll');
console.log('unbind scroll');
// Get next link URL
var post_id = $(self).attr('href');
// Load new top content in offset slide
$.get(post_id, {}, function(data) {
var $response = $('<div />').html(data);
var $image = $response.find('#imageContainer')
var $content = $response.find('#introContentContainer')
$('.direction').append($image).append($content);;
setTimeout(function(){$('.direction').show('slide',{direction: 'right', easing: 'easeOutCubic'}, 600);$('.main').hide('slide', { direction: 'left', easing: 'easeOutCubic' }, 600);},100);
setTimeout(function(){
// Reset slider
if($('#default').hasClass('main')) {
$('#default').addClass('direction').removeClass('main');
} else {
$('#default').addClass('main').removeClass('direction');
}
if($('#load').hasClass('main')) {
$('#load').addClass('direction').removeClass('main');
} else {
$('#load').addClass('main').removeClass('direction');
}
$('.direction').empty().hide();
$('.disableClicks').hide();
},700);
setScroll();
console.log('bind scroll');
return false;
},'html');
};
function setScroll() {
$(document).bind('scroll', function(e){
if (processing)
return false;
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10){
processing = true;
console.log('the function is processing ' + processing);
getResults();
}
});
}
function getResults() {
var url = window.location.href;
console.log(url);
$('#postContentContainer').load(url + ' .postContent-2', function(){
count++;
console.log('why doesnt this run!');
return false;
});
console.log('run scroll function');
processing = false;
}
以下是目前为止的步骤:
1)点击按钮,在视图中加载新帖子。
2)滑入视口,滑出旧容器&amp;重置课程。
3)在滚动提取新页面后div“.postContent-2”(这最终将是动态的)但是这会失败。
任何人都可以看到为什么这不起作用?任何人都可以帮忙解决问题吗?
谢谢,
安德鲁
答案 0 :(得分:0)
有这个工作!
将我的getResults函数更改为此
function getResults() {
var url = window.location.href;
console.log(url);
$.ajax({
url : url,
type: 'GET',
success: function(data) {
var html = jQuery('<div>').html(data);
var $newcontent = html.find('.postContent-2');
$('#introContentContainer').append($newcontent);
console.log('this now runs!');
return false;
}
});
console.log('run scroll function');
processing = false;
}