将整个 Bootstrap 3 <div> 放入 Javascript 数组中

Question

所以我是网络开发的新手。我正在尝试将带有图像和容器的 div 放入一个数组中，允许我使用 (display: none) 隐藏整个 div，然后在第二个数组插槽中使用 (display: block) 显示另一个 div。我不确定如何做到这一点，但这是我迄今为止的尝试。

HTML：

<div class="container-fluid">
<div class="col-xs-1 col-xs-push-1 rightLeftChevrons">
    <a href="#" class="btn-xxl btn-color btn-block" id="leftControl" onclick=""><span class="glyphicon glyphicon-chevron-left center-block" aria-hidden="true"></span></a>
</div>
<div class="col-xs-10">
    <div class="container">
        <div class="row" id="imagesSlide">
            <div id="imagesTabsOne">
                <div class="col-xs-12">
                    <div class="well well-lg" id="imageWell">
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="imagesTabsTwo">
                <div class="col-xs-12">
                    <div class="well well-lg" id="imageWell">
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image2" alt="imagesImage">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                            <div class="col-xs-4">
                                <img class="img-responsive img-center img-rounded" src="http://placehold.it/256x256&text=Image" alt="imagesImage">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="col-xs-1 col-xs-pull-1 rightLeftChevrons" id="rightControl">
    <button class="btn-xxl btn-color btn-block" onclick="imagesTabSlide()"><span class="glyphicon glyphicon-chevron-right center-block" aria-hidden="true"></span></button>
</div>

Javascript：

var IS_i = 0;
var elem_IS = document.getElementById('imagesSlide');
var pageOne = document.getElementById('imagesTabsOne');
var pageTwo = document.getElementById('imagesTabsTwo');
var imagesTabsArray = [pageOne, pageTwo];

function imagesTabNext(){

    IS_i++;
    elem_IS.style.display = "none";
    if (IS_i > (imagesTabsArray.length -1)){
        IS_i = 0;
    }
    setTimeout('imagesTabSlide()',1000);
}

function imagesTabSlide(){

    elem_IS.innerHTML = imagesTabsArray[IS_i];
    elem_IS.style.display = "block";
    setTimeout('imagesTabNext()',2000);

}

目前它设置为在按下按钮时激活，仅用于测试目的。

这一切也几乎都有效，但我得到的是 [object HTMLDivElement] 而不是我的 div。

基本上我想用我创建的 div 块制作幻灯片。

Answer 1

innerHTML 是一个字符串，您尝试分配给它的任何内容都将转换为字符串，这就是您得到“[object HTMLDivElement]”的原因。

相反，您可以使用 appendChild 将元素插入到树中：

    elem_IS.appendChild( imagesTabsArray[IS_i] );

但是，您可能想从那里删除另一个元素，不是吗？为此，您可以这样做：

    elem_IS.removeChild( elem_IS.firstChild );

另外，不要将字符串作为第一个参数传递给setTimeout：这是性能损失，并且还要求您的函数是全局的。改为传递函数：

    setTimeout( imagesTabNext, 2000 );

Answer 2

您需要使用innerHTML。这将从您创建的对象中检索 div 块。

elem_IS.innerHTML = imagesTabsArray[IS_i.innerHTML];