Question

我在html页面中有3个div，2个div应该是hiddent，但是theire内容应该显示在另一个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>

Answer 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>

Answer 2

试试这个：

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

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

<强> Working DEMO

Answer 3

请勿使用.html()功能将内容从一个地方复制到另一个地方。 HTML是一种序列化格式，旨在将DOM结构从服务器传送到客户端。一旦页面处于DOM结构中，您应该使用DOM方法直接操作该DOM结构。使用.html()序列化DOM节点，然后在其他地方重新创建它可能会丢失事件处理程序，其他隐藏数据等等。

在此基础上，将div的当前内容复制到另一个：

var $contents = $('#contentA').contents().clone();  // copy the source element's 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);
    })();
 })();

Answer 4

使用interval每隔x秒触发一次函数，然后使用jQuery replaceWith来交换div。如果您不想替换实际节点而只想替换内容，那么.html（）可能就是您的选择。

Answer 5

我不知道这是否是你需要的，但这个脚本应该有效：

check = true;
$(document).ready(function(){
    setInterval(function(){
        if(check) {
            check = false;
            $('#displayArea').html("a");
        }
        else {
            check = true
            $('#displayArea').html("b");
        }
    }, 5000);
});

Answer 6

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/

Answer 7

以下是使用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

Answer 8

尝试以下代码

<!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>

使用计时器将DIV的内容切换为另一组DIV

8 个答案: