Question

我正在学习Javascript和jQuery，因此我遇到了一些麻烦。我[使用[fullPage.js] [2] [制作单页网站] [1]并且我通过WordPress的JSON获取网站的数据。最终我想用cordova编译这个signle页面网站来制作移动应用程序。

问题：

FullPage.js附带右/左滑块，Id喜欢用它们来显示单页网站每个部分的内容。但是，当我尝试使用javascript和JSON从帖子循环创建幻灯片<div class="slide">时，我无法将幻灯片渲染为幻灯片。我得到的只是一堆div，附有“slide”类，它什么也没做。

这是一个例子，它获取转换为WordPress帖子的推文，并且我喜欢每个推文都是幻灯片，因此您可以浏览最近的推文。如何获得在javascript循环中创建的幻灯片div：

     <!-- TWITTER POST JSON -->
         <script type="text/javascript">
          var tweeturl = "http://ngaio.dogpatchmedia.com/api/get_posts/?posts_per_page=10&post_type=tweet";

                $.ajax({

                    type: 'GET',
                    url: tweeturl,
                    complete: function(){                    
                    },
                    success: function (data) {

                        var response = data; //JSON.parse(data);

                        //loop through posts
                        for(var i = 0; i != response.posts.length; i++) {

                        //get each element in the array
                        var post = response.posts[i];

                        // post vars
                        var tweetContent = post.content;

                        // output stuff so we can see things
                        $("#twitter").append('<div class="slide"><div class="large-12 small-12 columns testimonial"><div class="twitterQuote"><p>' + tweetContent + '</p></div><div class="twitter"><div class="photo"><img src="img/twitterLogo.png"> </div></div></div></div>').trigger('create');

                        }


                    },
                    error:function (xhr, ajaxOptions, thrownError) {                    
                        alert("Error");

                    }

                });
      </script>

  <!-- TWITTER (SLIDER) -->

     <div class="section"><div class="row" id="twitter"></div></div>

注意：

You can see the full site here

FullPage.Js docs can be found here

Answer 1

在添加幻灯片之前，您正在初始化fullpage.js。 Javascript是异步的，你需要小心。

您应该在ajax调用的success语句中添加fullpage.js的初始化。在您使用javascript添加幻灯片之后。

由JavaScript创建的HTML不起作用 - 滑块不滑动

1 个答案: