按顺序从 Carousel 控件中添加和删除元素

Question

我在 html 中有一个旋转木马控件，我在滑块中有 10 个元素（divs 和文本），你可以说在 [=38] 中有 10 个 children =] div 我想检查条件并相应地删除它们。这是我所做的，我将所有 children divs 放在主 parent div 中并创建了另一个 parent div 这是空白且现在完全隐藏，每次我在检查某些条件时删除任何 child div 我在隐藏 parent div 中添加相同的 child 然后从主要 parent div。同样，在将 child div 添加回 main parent div 之前，我将 child 从 hidden div 添加到 main div。现在，问题是我想以相同的顺序添加删除的 divs，例如我删除了 div 3 和 div 5 现在 parent 有 div 1, div 2, div4 和 div 6 现在我想在列表中添加 div 5 这样，该列表应该变成 div 1, 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 时，检查 children 中已经存在的 ID 并在您追加的那个之前搜索最大的，一旦找到它就插入div 与 jquery 方法 .after 并且它会出现在它之后。
如果你不使用 jquery，你也可以使用 insertBefore，但这看起来像一个 Bootstrap 轮播，所以我认为你在那里有 jquery。

按顺序从 Carousel 控件中添加和删除元素

Adding and removing elements from Carousel control in sequence

html

javascript

css

bootstrapping