jQuery显示下一个内容

时间:2014-08-26 17:23:02

标签: javascript jquery

我创建了一个网站,它总是在刷新后返回一个随机短语。我想在没有刷新页面的情况下制作这个东西。这是代码:

  $(window).click(function() {
    $('.ats p').fadeIn(500);
  });

" .ats p"是一个div类,它在我点击网站的任何地方后淡入,但问题是当我再次点击该短语没有改变时;没有任何反应。

每次点击时如何刷新代码?它应该是这样的:当我点击时,短语显示,当我第二次点击时,它应显示下一个短语。

3 个答案:

答案 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/

HTML

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

CSS

.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);
}

JS

    $('.ats > p').on('click', function(){
        var nextP  = $('.active').removeClass('active').next();
        if (!nextP.length)
            nextP = $('.ats > p').first().addClass('active');
        else
            nextP.addClass('active');
    });