2013-09-01 2 views
0

В настоящее время я загружаю фотографии и текст в div, используя jquery appendTo. Я пытаюсь сделать так, чтобы каждый клик просто перезагружал добавление, но вместо этого просто добавляет новые элементы, а не очищает старый и загружает новое. Моя функция в настоящее время выглядит так:Обновить jquery appendto onclick

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'); 


     }); 
}; 

Любая помощь очень ценится !!!

ответ

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); 

} 

, а затем просто переставить дивы туда, где вы хотели бы содержание появляться при обновлении их ,

+0

это сработало отлично! благодаря! – terra823

+0

рад, что я мог бы помочь :) – xJoshWalker

1

Я не уверен, что вы добавили новые элементы внутри контейнера после существующих элементов внутри контейнера. Если вы хотите заменить контент, вы должны использовать $(element).html(newContent)