Question

JavaScript / jQuery newbie here ...我正在努力循环使用JSON文件并使用jQuery连续渲染顶级项目。这里的目的是显示单个元素，然后在显示连续元素之前淡出它们。但是，我的脚本只渲染最后一个元素。知道这是什么我可能在这里做错了吗？

JSON文件--- x.json

{"questions":[
    {
    "q":"Question1...?",
    "a": [
    "Answer 1a",
    "Answer 1b",
    "Answer 1c",
    "Answer 1d"
]
},
{
    "q":"Question2...?",
    "a": [
    "Answer 2a",
    "Answer 2b",
    "Answer 2c",
    "Answer 2d"
]
}
]}

JavaScript文件--- x.js

$(document).ready( function () {
    $.getJSON('x.json', function (jsondata) {
        // compute total number of questions in JSON file
        var totalQuestions = jsondata.questions.length;
        $.each(jsondata.questions, function (i) {
            var questionNumber = i + 1; // add one since indicies start at 0
            var questionContent = jsondata.questions[i]["q"];
            var answerContent = ''; 
            // generate questions progress HTML text
            var questionHTML = '<div class="questionCount">Question <span class="current">' + questionNumber +'</span> of <span class="total">' + totalQuestions + '</span>';
            // generate question HTML text
            questionHTML += '</div><h3>' + questionNumber + '. ' + questionContent + '</h3>';
            console.log(JSON.stringify(jsondata.questions[i]["q"]));
            var answersHTML = '<ul type="A" class="answers">';
            $.each(jsondata.questions[i]["a"], function (k) {
                answerContent = jsondata.questions[i]["a"][k];
                answersHTML += '<li><input type="radio"><label>' + answerContent + '</label></li>';
            }); 
            answersHTML += '</ul></li>';
            questionHTML += answersHTML;
            console.log(questionHTML);
            $("#placeholder").html(questionHTML);
            setInterval(function () {
                $("#placeholder").html(questionHTML);
                $("#placeholder").fadeIn(6000).delay(3000).fadeOut(1000);
            }, 5000);
        }); 
    }); 
});

HTML文件--- x.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>JSON Sample</title>
</head>
<body>
    <div id="placeholder"></div>
    <script src="js/jquery.js"></script>
    <script src="x.js"></script>
</body>
</html>

Answer 1

首先我假设你想把所有问题都放在同一个位置，对吧？添加一些CSS如下：

#placeholder {
    position: relative;
}
#placeholder .question {
    position: absolute;
}

我在课堂.question的DIV中把你的问题和相应的答案包裹起来。将您的jQuery代码更改为以下内容：

            [...]

            // generate questions progress HTML text
            var questionHTML = '<div class="question" style="display:none;">
                    <div class="questionCount">Question <span class="current">' + questionNumber + '</span> of <span class="total">' + totalQuestions + '</span>';

            [...]

            answersHTML += '</ul></li>
                </div>';

            [...]

            console.log(questionHTML);
            $("#placeholder").html(questionHTML);
        }); // end foreach
    }); // end .getJSON callback

    animate();
}); // end $(document).ready callback

function animate(current) {
    var count = $('#placeholder .question').length;
    if (isNaN(current)) { current = 0; }
    console.log(current);
    animateOne($('#placeholder .question').get(current), function() {
        animate(++current % count);
    });
};

function animateOne(el, callback) {
    $(el).fadeIn(6000).delay(3000).fadeOut(1000, function() {
        callback();
    });
};

试用JSFiddle：http://jsfiddle.net/97buosve/7/

替代动画

您可以使用此替代功能在褪色时同时查看两个问题。我只是将回调从fadeIn移回fadeOut ...

function animateOne(el, callback) {
    $(el).fadeIn(6000, function() {
        callback();
    }).delay(3000).fadeOut(1000);
};

试用JSFiddle：http://jsfiddle.net/97buosve/8/

无循环的替代动画

function animate(current) {
    var count = $('#placeholder .question').length;
    if (isNaN(current)) { current = 0; }
    console.log(current);
    animateOne(
        $('#placeholder .question').get(current), // question to animate
        (current +1 < count), // hide it after fadeIn, only if it isn't the last question
        function() { // callback to animate the next question
            if (current +1 < count) { // prevent loop, only set callback if it isn't the last question
                animate(++current % count);
            }
        }
    );
};

function animateOne(el, hideItAfter, callback) {
    $(el).fadeIn(6000, function() {
        callback();
    });
    if (hideItAfter) {
        $(el).delay(3000).fadeOut(1000);
    }
}

http://jsfiddle.net/97buosve/9/

Answer 2

两个错误：

1）setInterval不是＆＃34;暂停＆＃34;功能。它立即返回，所以你的循环以毫秒为单位闪烁（因此你只看到最后一次重复）。

2）你没有设置一个闭包。检查这个常见问题，关于如何在循环内的闭包中传递变量：JavaScript closure inside loops – simple practical example

动态循环JSON并在设置间隔后显示和隐藏对象元素

2 个答案: