Question

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

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

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

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

Answer 1

$(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数组。然后在每次单击时增加一个可用于获取下一个短语的变量。

Answer 2

尝试一下......它会淡出，更新短语，然后淡入。

  $(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);
          });
      });
  });

Answer 3

如果没有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');
    });

jQuery显示下一个内容

3 个答案:

HTML

CSS

JS