Question

我有一些代码可以从其他网站获取json数据：

<html>
<head><script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://richhollis.github.io/vticker/downloads/jquery.vticker.min.js>
</script>
</head>
<div id="example">
<ul class="row template">
        <li class="nohp"></li>
        <li class="content"></li>
        <li class="date"></li>
        <br/>
    </ul>
<script>
$(function() {

$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
console.log(json);
for (var i = 0; i < json.length; i++) {
    row = $(".row.template").clone();
    row.removeClass("template");
    var map     = json[i].propertyMap;
    var content = map.isi;
    var user    = map.No_HP;
    var date    = map.tanggal;

    row.find('.date').text(date);
    row.find('.nohp').text(user);
    row.find('.content').text(content);
    $("example").append(row);
}
$('#example').vTicker();
});
});
</script>
</body>
</html>

我想用一些像vTicker这样的垂直滚动条动画它，但页面什么也没显示。我已经尝试了this中的一些示例并对其进行了修改但仍无法正常工作。任何想法如何将垂直自动收报机与上面的代码结合起来？

vTicker不是必须的，所以我也会接受任何其他推荐的垂直功能。

- 编辑：我将代码更改为无效的代码而不是$ getJSON函数代码

Answer 1

vTicker插件希望您的<div>内置<ul>。它将做的是在那里取出所有<li>并滚动它们。

您无法正确创建HTML以使代码正确呈现任何内容。您想为要滚动的每个元素添加新的<li>。你很亲密，但你应该这样做：

<div id="slider">
    <ul class="row"></ul>
</div>

然后只需将<li>附加到其中：

$(function () {
    $.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function (json) {
        for (var i = 0; i < json.length; i++) {
            var map = json[i].propertyMap;
            var content = map.isi;
            var user = map.No_HP;
            var date = map.tanggal;

            $('#example .row').append('<li>'+
                content + '<br>' +
                user + '<br/>' +
                date +
            '</li>');
        }

        $('#example').vTicker();
    });
});

DEMO：http://jsfiddle.net/PFex7/

将jquery vTicker与getJSON结合使用

1 个答案: