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

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 部分

$(".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 时，它就会消失。所以现在你不能引用它。

因此，您要么不需要删除该元素而只是将其隐藏，要么不将其清空，而是将该元素移回原来的位置。