时间戳

首页 > 解决方案 > 基于移动视图宽度的移动元素不会恢复到原始桌面视图

javascript - 基于移动视图宽度的移动元素不会恢复到原始桌面视图

问题描述

这是一个两部分的问题。我有 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>

有两个问题：

  1. 该函数在达到正确的宽度范围时执行，但是，当我将其调整回桌面视图时，它不会删除更改。

  2. 当我将图像从其原始位置移动时，它只从第一个容器中获取图像并将其放置在每个标题类中三次。

我尝试删除 for 循环并手动检查是否从除第一个容器之外的任何其他容器中移动一个图像是否会实际执行，但它不会。它仅在我的“imageSwitch”变量等于：nth-​​child (1) 时才会执行，我似乎无法弄清楚为什么会出现这种情况。

标签： javascriptjqueryhtml

解决方案

您缺少还原代码。像下面的东西..

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/

推荐阅读