jQuery显示下一个内容

jQuery show next content

本文关键字：下一个 显示 jQuery      更新时间：2023-09-26

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

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

".ats p"是一个div类，在我点击网站上的任何地方后，它都会消失，但问题是当我再点击一次时，这个短语不会改变；什么也没发生。

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

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

尝试一下。。。它将淡出，更新短语，然后淡出。

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

如果没有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');
    });
相关文章：