Question

我使用appendingTo将图像（img1）附加到div，然后我想在div中清空（img1）并将其他内容（img2）附加到其中。但当我试图追加（img1）时，没有任何东西出现。

<div id="countries">
    <div class="fixed">
        <div class="firstRow display all" id="nz">
            <h2>New Zealand</h2>
            <p>Awesome cities and nature</p>
        </div>
        <div class="firstRow display all" id="aust"></div>
        <div class="firstRow display all" id="vietnam"></div>
        <div class="clear"></div>
        <div class="secondRow display all" id="fiji"></div>
        <div class="secondRow display all" id="sing"></div>
        <div class="secondRow display all" id="raro"></div>
    </div>

</div>
<div id="cities">
    <div class="fixed">
        <div id="left">
            <div class="bigLeft" id="zero"></div>
            <div class="smallLeft" id="one" style="margin-left: 0px"></div>
            <div class="smallLeft" id="two"></div>
            <div class="smallLeft" id="three"></div>
            <div class="smallLeft" id="four" style="margin-left: 0px;"></div>
            <div class="smallLeft" id="five"></div>
        </div>
        <div id="rightBar">
            <div id="city1" class="citiesPlace" style="margin-top:0px;"></div>
            <div id="city2" class="citiesPlace" style="margin-top:0px;"></div>
            <div id="city3" class="citiesPlace" style="margin-top:0px;"></div>
            <div id="city4" class="citiesPlace"></div>
            <div id="city5" class="citiesPlace"></div>
            <div id="city6" class="citiesPlace"></div>
            <div id="city7" class="citiesPlace"></div>
            <div id="city8" class="citiesPlace"></div>
            <div id="city9" class="citiesPlace"></div>
        </div>
    </div>
</div>

<div id="nzImg0" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>
<div id="nzImg1" style="display:none;">
    <img src="Images/nz.jpg" style="width: 219px; height: 150px">
</div>
<div id="nzImg2" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>
<div id="nzImg3" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>
<div id="nzImg4" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>


<div id="austImg0" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>
<div id="austImg1" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>
<div id="austImg2" style="display:none;">
    <img src="Images/aust.jpg" style="width: 219px; height: 150px">
</div>

jQuery Part

$(".all").click(function () {
    $("#countries").fadeOut(500);
    $("#cities").fadeIn(500);

    var j = 1;
    var f = 0;
    for (var i = 0; i < a.length; i++) {

        if (a[i] == $(this).attr("id")) {

            $(this).appendTo("#zero");
            $(this).find("h2").css("fontSize", "300%");
            $(this).find("p").css("fontSize", "80%");
            $(this).css("height", "100%");
            $(this).css("width", "100%");

            for (var m = 0; m < c.length; m++) {
                $("#" + c[m]).empty();
            }

            for (var f = 0; f < c.length; f++) {
                $("#" + a[i] + "Img" + f + " " + "img").appendTo("#" + c[f]);
                $("#" + a[i] + "Img" + f + " " + "img").css("display", "block");

            }
        } else if (a[i] != $(this).attr("id")) {

            $("#" + a[i]).appendTo("#" + b[j]);
            $("#" + a[i] + " " + "h2").css("fontSize", "100%");
            $("#" + a[i] + " " + "p").css("fontSize", "80%");
            $("#" + a[i]).css("height", "100%");
            $("#" + a[i]).css("width", "100%");
            j++;
        }
    }
});

Answer 1

当您将元素追加到div中时，您正在移动它。移动时，原件不再存在。当你清空div时它会消失。所以现在你不能参考它。

所以你要么不需要删除元素而只是隐藏它，要么将其隐藏起来，将元素移回原来的位置。

如何将图像附加到div然后清空它然后再次附加到它？

1 个答案: