Question

我严重受伤。我想切换一些我从API中提取的元素的可见性。 API允许我提出故事的获取请求，我正在拉动标题和图像。我一次最多可以从API获取15个请求。我想要做的是一次显示一个请求，而不是一次显示所有请求。当我提出请求时，我立即得到它们。

我正在考虑将图片和标题放入列表中，让每个孩子一次看到一个。我的jQuery代码如下：

var main = function () {
    var url = 'http://devapi.xxxxxxx.com/v1/en/stories/latest?format=json&apikey=xxxxxxxxxxxxxxxx';

    $.getJSON(url, function(xxxxxx_response) {
        //console.log(xxxxx_response);

        xxxxxxxxxx_response.stories.forEach(function(data) {
            console.log(data);

            var $img = $("<img>");
            var $p = $("<p>");


            $img.attr({
                "src": data.largeimage,
                "hidden": true,
                "id": []
                });
            $p.attr("hidden", true).append(data.title['#cdata-section']);

            $("main .story").append($img, $p);

            $("button").click(function(img, p) {
                //$img.attr('hidden', false);
                //$p.attr('hidden', false);

                //s$img.slideToggle('slow');
                $img.attr('hidden', false);
                $p.attr('hidden', false);

            });
        });
    });
}

（文档）$。就绪（主）;

这是我的HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="">
        <title>Media on the Move</title>
        <style type="text/css">
            img {
                width: 360px;
                heigh: auto;
            }

        </style>

    </head>
    <body>
        <main>
            <button>Next</button>   
            <div class="story"></div>
        </main>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="lib/app.js"></script>
    </body>

</html>

请帮助!!!

Answer 1

像这样创建你的函数： -

将所有故事存储在数组中，我们假设story_list中的length_story和story_list的长度。
然后创建一个迭代函数，如下所示

function nestedStoryShow(array1 , length1){ //terminating codition if (length1 == 0){ return; } else{ var $img = $("<img>"); var $p = $("<p>"); $img.attr({ "src": array1[array1.length- length1].largeimage, "id": [] }); $p.append(array1[array1.length- length1].title['#cdata-section']); $("main .story").append($img, $p); setTimeout( function() { $img.hide(); $p.hide(); nestedStoryShow(array1 , length1-1); }, 3000);/*Your Story stays for 3 second and then it is hidden*/ } }

在成功收到ajax呼叫后，将此功能附加到您的按钮。

success:function(data){ story_list //array of story length_story //length $(button).click(function(){ nestedStoryShow(story_list,length_story); }); }

jQuery切换子可见性

1 个答案: