1
我一直在撓我的頭，想知道是否有人有解決方案。實際上，我創建了一個完整的視口滑塊，可以動態地將帖子加載到一個隱藏的div中，然後根據點擊箭頭的方向將其動畫化爲頁面。我可以得到隱藏的div動畫中，但是腳本會停止第一次點擊，因此所有其他職位沒有得到在拉運行後阿賈克斯加載職位爲整頁幻燈片
HTML/PHP：
// First Div that hold all loaded data
<div id="Default" class="main">
<div id="fullContent">
<?php while (have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<div class="leftArrow">
<?php previous_post_link_plus(array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true)); ?>
</div>
<div class="rightArrow">
<?php next_post_link_plus(array('format' => '%link', 'order_by' => 'menu_order', 'loop' => true)); ?>
</div>
</div>
</div>
// Second div where new content will be loaded
<div id="LoadAjax" class="direction"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
JQUERY
$.ajaxSetup({cache:false});
$('body').on('click', '.rightArrow a', function(e){
e.preventDefault();
history.pushState({ path: this.path }, '', this.href);
$('.direction').hide();
RightSlide(this);
return false;
});
$('body').on('click', '.leftArrow a', function(e){
e.preventDefault();
$('.direction').hide();
history.pushState({ path: this.path }, '', this.href);
LeftSlide(this);
return false;
});
function RightSlide(that) {
var post_id = $(that).attr('href');
$('.direction').load(post_id + ' #fullContent', function(){
// Animate Slides In & Out
setTimeout(function(){
$('.direction').show('slide',{direction: 'right'},600);
},50);
setTimeout(function(){
$('#Default').addClass('direction').removeClass('main').empty();
$('#LoadAjax').addClass('main').removeClass('direction');
},650);
return false;
});
};
function LeftSlide(that) {
var post_id = $(that).attr('href');
$('.direction').load(post_id + ' #fullContent', function(){
// Animate Slides In & Out
setTimeout(function(){
$('.direction').show('slide',{direction: 'left'},600);
},50);
setTimeout(function(){
$('#Default').addClass('direction').removeClass('main').empty();
$('#LoadAjax').addClass('main').removeClass('direction');
},650);
return false;
});
};
正如您在初始加載時所看到的那樣，它們都按預期工作，但是如果我再次單擊右鍵時再次執行任何操作。
我的問題，有沒有辦法重置第二次點擊功能？它不會在第二次點擊時運行的原因是什麼？
感謝您的高級幫助。這個主題絕對的業餘愛好者，所以任何反饋將不勝感激，以幫助我學習。
乾杯，
一個
編輯：增加了另外的腳本
解決方案：
$.ajaxSetup({cache:false});
$('body').on('click', '.rightArrow a', function(e){
e.preventDefault();
history.pushState({ path: this.path }, '', this.href);
$('.disableClicks').show();
RightSlide(this);
return false;
});
$('body').on('click', '.leftArrow a', function(e){
e.preventDefault();
$('.disableClicks').show();
history.pushState({ path: this.path }, '', this.href);
LeftSlide(this);
return false;
});
function RightSlide(that) {
var post_id = $(that).attr('href');
$('.direction').load(post_id + ' #fullContent', function(){
// Animate Slides In & Out
setTimeout(function(){
$('.direction').show('slide',{direction: 'right'},250);
},50);
setTimeout(function(){
if($('#Default').hasClass('main')) {
$('#Default').addClass('direction').removeClass('main');
} else {
$('#Default').addClass('main').removeClass('direction');
}
if($('#LoadAjax').hasClass('main')) {
$('#LoadAjax').addClass('direction').removeClass('main');
} else {
$('#LoadAjax').addClass('main').removeClass('direction');
}
$('.direction').empty().hide();
$('.disableClicks').hide();
},310);
return false;
});
};
function LeftSlide(that) {
var post_id = $(that).attr('href');
$('.direction').load(post_id + ' #fullContent', function(){
// Animate Slides In & Out
setTimeout(function(){
$('.direction').show('slide',{direction: 'left'},250);
},50);
setTimeout(function(){
if($('#Default').hasClass('main')) {
$('#Default').addClass('direction').removeClass('main');
} else {
$('#Default').addClass('main').removeClass('direction');
}
if($('#LoadAjax').hasClass('main')) {
$('#LoadAjax').addClass('direction').removeClass('main');
} else {
$('#LoadAjax').addClass('main').removeClass('direction');
}
$('.direction').empty().hide();
$('.disableClicks').hide();
},310);
return false;
});
};