При перемещении элементов в зависимости от ширины представления на мобильном устройстве не выполняется возврат к исходному представлению на рабочем столе.

Это вопрос из двух частей. У меня есть 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) Я просто не могу понять, почему это может быть так.

Просто вопрос: почему вы для этого используете jQuery? Bootstrap был разработан с учетом адаптивного дизайна.

Rich 13.09.2018 20:57

Не могу использовать Bootstrap для этого. Это задание выполнить адаптивный дизайн без использования Bootstrap. Я делал это раньше с помощью начальной загрузки.

Ian Stahl tailwhoop 13.09.2018 21:18

вы также можете добиться этого с помощью медиа-запросов css

Shubham Sharma 13.09.2018 21:38
0
3
38
1

Ответы 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/

.each и это! Конечно. Я попробовал функцию .forEach и получил те же результаты. Ваше решение для этой проблемы имеет гораздо больше смысла, чем когда-либо существовавшие шаблонные литералы. Большое спасибо. Мне нужно читать больше об этом и каждый раз. Спасибо еще раз.

Ian Stahl tailwhoop 13.09.2018 21:44

Пожалуйста .. Примите ответ, если он решит вашу проблему :)

Nimitt Shah 13.09.2018 21:45

Быстрый вопрос: есть ли способ вызвать этот пожар, если вы загружаете страницу из мобильного представления, а не только с того момента, когда я загружаю страницу на рабочем столе, чтобы просмотреть и уменьшить ее? Странно, что он не срабатывает. Мне сказали использовать enquire.js, чтобы помочь с этим, но я не думаю, что мне разрешено использовать библиотеки.

Ian Stahl tailwhoop 14.09.2018 02:58

Он также должен запускаться с мобильного устройства. Убедитесь, что вы не загружаете свою страницу в режиме рабочего стола в мобильном приложении. Это должен быть мобильный вид. Если вам не разрешено использовать Bootstrap, вы можете использовать для этого @mediaquery в CSS .. Вы можете прочитать это здесь w3schools.com/css/css_rwd_mediaqueries.asp

Nimitt Shah 14.09.2018 15:24

Другие вопросы по теме