Переключение содержимого DIV с другим набором DIV с таймером

0

У меня есть 3 divs на html-странице, 2 divs должны быть hiddent всегда, но ваш контент должен отображаться в другом div, и это содержимое должно быть изменено каждые x секунд. Как это можно использовать jquery/javascript?

    <div id="contentA">
    <!-- Some contents goes here, and it should be hidden -->
    </div>

    <div id="contentB">
    <!-- Some contents goes here, and it should be hidden -->
    </div>        

    <div id="displayArea">
    <!-- switch between contentA and contentB on a timer say every 5 seconds -->
    </div>
Теги:

8 ответов

1
Лучший ответ

Не используйте функцию .html() для копирования содержимого из одного места в другое. HTML - это формат сериализации, предназначенный для переноса структур DOM с сервера на клиента. Когда страница находится в структуре DOM, вы должны напрямую манипулировать этой структурой DOM с помощью методов DOM. Использование .html() для сериализации узла DOM, а затем воссоздать его где-то еще, рискует потерять такие вещи, как обработчики событий, другие скрытые данные и т.д.

Исходя из этого, чтобы скопировать текущее содержимое div в другое:

var $contents = $('#contentA').contents().clone();  // copy the source element contents
$('#displayArea').empty().append($contents);        // drop them into the destination

В полном объеме:

(function() {
    var delay = 3000;
    var state = 0;
    (function next() {
         state = 1 - state;
         var src = state ? '#contentA' : '#contentB';
         var $contents = $(src).contents().clone();
         $('#displayArea').empty().append($contents);
         setTimeout(next, delay);
    })();
 })();
Поделиться
  • 0
    Спасибо, это был лучший ответ!
  • 0
    Можете ли вы сказать мне, если я хочу, чтобы первый div показывал, скажем, 15 секунд, а второй показывает в течение 5 секунд, что мне делать?
Показать ещё 3 комментария
1

Попробуй это :)

<div id='a' style='display: none;'>this is a</div>
<div id='b' style='display: none;'>this is b</div>
<div id='show'></div>

<script>
$(document).ready(function(){
    var count = 0;
    var content = '';
    var j = setInterval(function () {
        count++;
        if(count%2===0){
            content = $('#a').html();
        }else{
            content = $('#b').html();
        }
        $('#show').html(content);
    }, 5000);
});
</script>
Поделиться
  • 0
    Нет, пожалуйста , не используйте .html() для копирования содержимого DOM с одного узла на другой - просто перемещайте узлы напрямую, используя методы DOM!
1

Попробуй это:

var toggle = false;
$("#displayArea").html($("#contentA").html());

setInterval(function() {
    $("#displayArea").html(toggle ? $("#contentA").html() : $("#contentB").html());
    toggle = !toggle;
}, 5000);

Рабочий ДЕМО

Поделиться
0

Попробуйте следующий код

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
var divSelected = "A";
function switch1()
{

if (divSelected == "A")
{
$("#displayArea").text($("#contentA").text());
divSelected  = "B";
}
else
{
$("#displayArea").text($("#contentB").text());
divSelected  = "A";
}

}

$(document).ready(function()
{
var test = setInterval( "switch1()" , 5000);
});
</script>
</head>
<body>

<div id="contentA" style = "display:none;">
Contect A
    </div>

    <div id="contentB" style = "display:none;">
Content B
    </div>        

    <div id="displayArea">

    </div>

</body>
</html>
Поделиться
0

Я не знаю, нужно ли это, но этот скрипт должен работать:

check = true;
$(document).ready(function(){
    setInterval(function(){
        if(check) {
            check = false;
            $('#displayArea').html("a");
        }
        else {
            check = true
            $('#displayArea').html("b");
        }
    }, 5000);
});
Поделиться
0 
function doSlides() {       
   var msg = messages.shift();
   messages.push(msg);
        $('#displayArea').html(msg);    
};

var messages = [
    $('#contentA').find('p').html(),
   $('#contentB').find('p').html()
];

Демо-версия:

http://jsfiddle.net/8Ux3L/

Поделиться
0

Используйте интервал для запуска функции каждые x секунд, затем jQuery replaceWith для замены div. Если вы не хотите заменять фактический узел, а просто содержимое, то, скорее всего, это путь.html().

Поделиться
  • 0
    replaceWith не заменяет содержимое , оно заменяет целые узлы и их содержимое.
0

Здесь один из способов сделать это с помощью setInterval():

var divs = $('div[id^="content"]').hide(),
    i = 0;

function cycle() {
    $("#displayArea").html(divs.eq(i).html());
    i = ++i % divs.length; // increment i, and reset to 0 when it equals divs.length
}

setInterval(cycle, 2000); //Cycle every 2 seconds

Обертка в самоисполняемой функции:

(function cycle() {
    $("#displayArea").html(divs.eq(i).html());
    i = ++i % divs.length; // increment i, and reset to 0 when it equals divs.length

    setTimeout(cycle, 2000);
})();

DEMO

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню