依次在 Carousel 控件中添加和删除元素

Question

我在 html 中有一个轮播控件，我在滑块中有 10 个元素（带文本的 div），你可以说就像在父 div 中有 10 个子元素，我想检查条件并相应地删除它们。这就是我所做的，我将所有子 div 放在一个主父 div 中，并创建了另一个父 div，它现在是空白且完全隐藏的，每次我在检查某些条件时删除任何子 div 时，我都会在隐藏的父 div 中添加同一个子在从主父 div 中删除它之前。同样，在将子 div 添加回主父 div 之前，我在将子 div 添加到主 div 后从隐藏 div 中删除它。现在，问题是我想以相同的顺序添加已删除的 div，例如，我删除了 div 3 和 div 5 现在父级有 div 1、div 2、div4 和 div 6，现在我想重新添加 div 5如此列出，该列表应变为 div1、div2、div4 div 5 div 6 等等……但按顺序保留它们似乎很困难。请查看代码并建议我任何替代方案或您认为我做错的任何事情。

    <div id="myCarousel" class="carousel slide " data-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Wrapper for carousel items -->
    <div id="parentDiv" class="carousel-inner">
        <div id="1" class="item active lx-carouselimage1 lx-height-600">
            <div class="lx-carouselheadertext align-center">1A better way to get the mortgage!</div>
            <div class="carouseltext align-center">
            </div>
        </div>
        <div id="2" class="item lx-carouselimage2 lx-height-600">
            <div class="lx-carouselheadertext align-center">2A better  way to get the mortgage!</div>
            <div class="carouseltext align-center">

            </div>
        </div>
        <div id="3" class="item lx-carouselimage3 lx-height-600">
            <div class="lx-carouselheadertext align-center">3A better  way to get the mortgage!</div>
            <div class="carouseltext align-center"></div>
        </div>
    </div>
    <div style="visibility:hidden" id="HiddenparentDiv" class="carousel-inner">

    </div>

    <!-- Carousel controls -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-right"><img src="~/App/Images/chevron-left.png" class="lx-width-50"></span>
    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"><img src="~/App/Images/chevron-right.png" class="lx-width-50"></span>
    </a>


</div>
<div></div>
<p>&nbsp;</p>
Name of child element to be removed: <input id="nameOfChild" type="text" value="child2"><input type="button" value="Remove Element" onClick="var name=document.getElementById('nameOfChild').value; removeElement('parentDiv', name);">
<br><br>
For those who are lazy in typing in the actual names, we have these handy-dandy buttons:
<input type="button" value="Remove child1" onClick="removeElement('parentDiv', '1', 'HiddenparentDiv');">
<input type="button" value="Remove child2" onClick="removeElement('parentDiv', '2', 'HiddenparentDiv');">
<input type="button" value="Remove child3" onClick="removeElement('parentDiv', '3','HiddenparentDiv');">
<input type="button" value="Remove parentDiv" onClick="removeElement('parentDiv', 'parentDiv',' HiddenparentDiv');">
<input type="button" value="Add child1" onClick="addElement('parentDiv','1','HiddenparentDiv');">
<input type="button" value="Add child2" onClick="addElement('parentDiv','2','HiddenparentDiv');">
<input type="button" value="Add child3" onClick="addElement('parentDiv','3','HiddenparentDiv');">

<script>
    var child1 = document.getElementById('parentDiv').getElementById('1');
    //var myID = document.getElementById('child1');
    //var children = document.getElementById('1').childNodes;
  alert(child1);

    function GetIndex(childId)
    {
        alert("Inside GetIndex ");

        var tempID = childId - 1;
        var parent = document.getElementById('parentDiv');

        while (tempID >= 0)
        {
            var childid = '#' + tempID;
            alert($('#parentDiv').find('#1'));
            // var child = document.getElementById('parentDiv').childNodes;
            //var child = document.getElementById('childDiv');
            //  alert(child);
            //var child = document.hasChildNodes;
            //var child = document.getElementById(tempID).childNodes;
            var child = document.getElementById('parentDiv').innerHTML;
            alert(child);

            if (child != null)
            {
                alert("Inside IF ");

                break;
            }
            else
            {
                alert("Inside elSE ");

                tempID--;
            }
        }
        if (tempID < 0)
        {
            tempID = 0;
        }
        return tempID;

    }

    function test() {
        alert(document.getElementById('hiddenDiv'));
    }

    function removeElement(parentDiv, childDiv, hiddenDiv) {
        if (childDiv == parentDiv) {
            alert("The parent div cannot be removed.");
        }
        else {
            var hidden = document.getElementById(hiddenDiv);
            var child = document.getElementById(childDiv);
            var parent = document.getElementById(parentDiv);
            hidden.appendChild(child);
            parent.removeChild(child);
        }

    }


    function addElement(parentDiv, childDiv, hiddenDiv) {
        var hidden = document.getElementById(hiddenDiv);
        var child = document.getElementById(childDiv);
        var parent = document.getElementById(parentDiv);
       // var index = GetIndex(child.id);
        //alert(index);
        parent.appendChild(child.childNodes[GetIndex(child.id)]);  
        hidden.removeChild(child);
    }

    function myFunction() {
        var newItem = document.createElement("LI");
        var textnode = document.createTextNode("Water");
        newItem.appendChild(textnode);

        var list = document.getElementById("myList");
        list.insertBefore(newItem, list.childNodes[0]);
    }
</script>

谢谢

Answer 1

当插入可见的 div 时，检查他们已经存在的孩子的 id，并在你要附加的那个之前搜索最大的，一旦你找到它，只需使用 jquery 方法.after 插入 div，它会出现在它之后。
如果您不使用 jquery，也可以使用 insertBefore，但这看起来像是 Bootstrap 轮播，所以我认为您那里有 jquery。