我创建了一个网站,它总是在刷新后返回一个随机短语。我想在没有刷新页面的情况下制作这个东西。这是代码:
$(window).click(function() {
$('.ats p').fadeIn(500);
});
" .ats p"是一个div类,它在我点击网站的任何地方后淡入,但问题是当我再次点击该短语没有改变时;没有任何反应。
每次点击时如何刷新代码?它应该是这样的:当我点击时,短语显示,当我第二次点击时,它应显示下一个短语。
答案 0 :(得分:0)
$(function() {
// ajax request that will pull your phrases from your database
// for each phrase in the array, push it to the javascript phrases array
});
var phrase = 0;
var phrases = ["Phrase 1", "Phrase 2", "Phrase 3"];
$(window).click(function() {
$('.ats p').fadeIn(500);
$('.ats p').html(phrases[phrase]);
phrase++;
});
怎么样?只需在页面加载时使用数据库中的数据填充phrases
数组。然后在每次单击时增加一个可用于获取下一个短语的变量。
答案 1 :(得分:0)
尝试一下......它会淡出,更新短语,然后淡入。
$(window).click(function () {
$.ajax({
url: "path/to/randomPhrase.php",
//change the above to whatever is generating the random phrase
}).done(function (text) {
$ats = $('.ats p');
$ats.fadeOut(500, function () {
$ats.text(text);
$ats.fadeIn(500);
});
});
});
答案 2 :(得分:0)
如果没有Ajax,请直播:http://jsfiddle.net/sh641gz4/2/
<div class="ats">
<p class="active">1 - Lorem ipsum dolor sit amet</p>
<p>2 - Lorem ipsum dolor sit amet, consectetur.</p>
<p>3 - Lorem ipsum dolor sit amet, consectetur.</p>
<p>4 - Lorem ipsum dolor sit amet, consectetur.</p>
<p>5 - Lorem ipsum dolor sit amet, consectetur.</p>
<p>6 - Lorem ipsum dolor sit amet, consectetur.</p>
</div>
.ats {
position: relative;
}
.ats > p {
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
transform: translateY(-30px);
transition: all .3s ease-out;
cursor: pointer;
}
.ats > p.active {
opacity: 1;
transform: translateY(0px);
}
$('.ats > p').on('click', function(){
var nextP = $('.active').removeClass('active').next();
if (!nextP.length)
nextP = $('.ats > p').first().addClass('active');
else
nextP.addClass('active');
});