Question

这是一个分为两个部分的问题。我有3个基本相同的容器。我想将图像元素从桌面视图中的位置移动到移动视图中的其他位置。这是jQuery：

checkSize();

$(window).resize(checkSize);

function checkSize() {
    if ($(window).width() <= 480) {
        const oddContainer = ".main-container:nth-child(odd)";

        for (var i = 1; i <= 3; i++) {
            let imageSwitch = `.main-container:nth-child(${i}) .body-banner img`;

            $(imageSwitch).prependTo(`.head-banner:nth-child(${i}`);
        }
    } else if ($(window).width() >= 481) {
        return false;
    }
}

这是HTML：

<div class="main-container">
    <div class="head-banner">
        <p class="discount">
            <span>26</span>
        </p>
        <p class="best">
            <span>BEST</span><br> <span id="value">VALUE</span>
        </p>
    </div>
    <div class="body-banner">
        <div class="wrapper">
            <div class="supply">
                <p><span class="text-bold">6</span> <span class="text-medium">Month Supply</span></p>
            </div>
            <img src="./assets/1md_advtur6_500x500@2x.png" />
            <div class="discount-price">
                <p class="text-bold">$33.17</p>
                <p class="between"><span id="strike">$45.00 </span><span>each</span></p>
            </div>

            <div class="after-line-break">
                <p class="text-bold green">SAVE $71</p>
                <P class="text-medium supply">Free Shipping!</P>
            </div>
            <button class="button text-bold">
                    ADD TO CART
            </button>
        </div>
    </div>
</div>
<div class="main-container">
    <div class="head-banner">
        <p class="discount">
            <span>15</span>
        </p>
        <p class="best">
            <span>BEST</span><br> <span id="value">SELLER</span>
        </p>
    </div>
    <div class="body-banner">
        <div class="wrapper">
            <div class="supply">
                <p><span class="text-bold">3</span> <span class="text-medium">Month Supply</span></p>
            </div>
            <img src="./assets/1md_advtur6_500x500@2x.png" />
            <div class="discount-price">
                <p class="text-bold">$38.33</p>
                <p class="between"><span id="strike">$45.00 </span><span>each</span></p>
            </div>

            <div class="after-line-break">
                <p class="text-bold green">SAVE $20</p>
                <P class="text-medium supply">Free Shipping!</P>
            </div>
            <button class="button text-bold">
                        ADD TO CART
                </button>
        </div>
    </div>
</div>

有两个问题：

该函数在达到正确的宽度范围时执行，但是，当我将其调整为桌面视图大小时，它不会删除更改。
当我从原始位置移动图像时，它仅从第一个容器中获取图像，并将其放置在每个总横幅类中三次。

我尝试删除for循环并手动检查以查看是否从第一个容器以外的任何其他容器移动一个图像是否可以执行，但不能执行。仅当我的“ imageSwitch”变量等于：nth-child（1）时，我才似乎无法弄清楚为什么会这样。

Answer 1

您缺少要还原的代码。像下面这样。

checkSize();

$(window).resize(checkSize);

function checkSize() {
    if ($(window).width() <= 480) {
        $(".main-container").each(function(){
            console.log($(this).find(".body-banner img"));
            $(this).find(".body-banner img").prependTo($(this).find(".head-banner"));
        });
    } else if ($(window).width() >= 481) {

        $(".main-container").each(function(){
            $(this).find(".head-banner img").appendTo($(this).find(".body-banner .wrapper>.supply"));
        });
    }
}

在这里测试。https://jsfiddle.net/nimittshah/vrzmp0e6/

根据移动视图宽度移动元素不会恢复到原始桌面视图

1 个答案: