0
私はhtmlでカルーセルコントロールを持っていますが、親div内に10人の子供がいるようなことができるスライダには10要素（テキスト付きのdiv）があり、条件を確認したいそれに応じて削除します。ここで私は何をしたのですか、私はすべての子divをメインの親divの中に入れ、何も条件をチェックしながら子divを削除するたびに空白で完全に隠された別の親divを作成しました。メイン親divから削除する前に同様に、メインdivに子divを追加する前に、メインdivに追加した後にhidden 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> </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>
おかげ