0

我目前正在使用 jquery appendTo 将照片和文本加载到 div 中。我试图让它在每次点击时，它只是重新加载正在附加的内容，但它只是继续附加新元素，而不是清除旧元素并加载新元素。我的功能目前看起来像这样：

   function load_new() {

   $.getJSON('images.json', function(data) {
    var $item = data.images[Math.floor(Math.random()*data.images.length)];

    var $image = $('<script id="scripty"> $.backstretch("' + $item.image + '", {speed: 1200}); </script>');
    var $caption = $('<h1>' + $item.caption + '</h1>');

    $image.appendTo('body');
    $caption.appendTo('.text');


        });
};

任何帮助是极大的赞赏！！！

4

2 回答 2

1

我不确定会得到你，但在容器内的现有元素之后追加在容器内添加新元素。如果你想替换你应该使用的内容$(element).html(newContent)

于 2013-09-01T22:14:20.580 回答
1

我会让你的结构不同。你可以有这样的结构：

<body>
    <div id="image"></div>
    <div class="text">

        <div class="append-text"></div>
    </div>
</body>

然后你的函数看起来更像这样：

function load_new() {

   $.getJSON('images.json', function(data) {
    var $item = data.images[Math.floor(Math.random()*data.images.length)];

    var $image = $('<script id="scripty"> $.backstretch("' + $item.image + '", {speed: 1200}); </script>');
    var $caption = $('<h1>' + $item.caption + '</h1>');

    $('#image').html($image);
    $('.append-text').html($caption);

}

然后只需将 div 重新排列到您希望内容在更新时出现的位置。

于 2013-09-01T22:16:52.450 回答