Javascript 用于在DOM中移动元素的通用脚本

我想创建一个通用代码，以便在桌面和移动设备之间轻松移动DOM中的元素。这不是我的想法，也不是我的代码。它只适用于Prestashop 1.7，但我想为任何项目更改它

这个想法是，你可以用

一些内容

包装一些你想在移动设备上移动到完全不同的地方的代码，然后把空的

放在你想在移动设备上看到它的地方，当窗口到达（例如）768px时，元素的HTML将移动到另一个位置

这里有一个原始代码：

import $ from 'jquery';
import prestashop from 'prestashop';

prestashop.responsive = prestashop.responsive || {};

prestashop.responsive.current_width = window.innerWidth;
prestashop.responsive.min_width = 768;
prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (prestashop.responsive.mobile) {
        $("*[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("*[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
    prestashop.emit('responsive update', {
        mobile: prestashop.responsive.mobile
    });
}

$(window).on('resize', function() {
    var _cw = prestashop.responsive.current_width;
    var _mw = prestashop.responsive.min_width;
    var _w = window.innerWidth;
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    prestashop.responsive.current_width = _w;
    prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (prestashop.responsive.mobile) {
        toggleMobileStyles();
    }
});

var windowWidth = $(window).innerWidth();
var windowMinWidth = 768;
var windowResponsiveMobile = windowWidth < windowMinWidth;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (windowResponsiveMobile) {
        $("*[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("*[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
}

$(window).on('resize', function() {
    var _cw = windowWidth;
    var _mw = windowMinWidth;
    var _w = $(window).innerWidth();
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    windowWidth = _w;
    windowResponsiveMobile = windowWidth < windowMinWidth;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (windowResponsiveMobile) {
        toggleMobileStyles();
    }
});

import$from'jquery'；
从“prestashop”导入prestashop；
prestashop.responsive=prestashop.responsive | |{}；
prestashop.responsive.current_width=window.innerWidth；
prestashop.responsive.min_width=768；
prestashop.responsive.mobile=prestashop.responsive.current_width

以下是我想做的：

import $ from 'jquery';
import prestashop from 'prestashop';

prestashop.responsive = prestashop.responsive || {};

prestashop.responsive.current_width = window.innerWidth;
prestashop.responsive.min_width = 768;
prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (prestashop.responsive.mobile) {
        $("*[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("*[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
    prestashop.emit('responsive update', {
        mobile: prestashop.responsive.mobile
    });
}

$(window).on('resize', function() {
    var _cw = prestashop.responsive.current_width;
    var _mw = prestashop.responsive.min_width;
    var _w = window.innerWidth;
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    prestashop.responsive.current_width = _w;
    prestashop.responsive.mobile = prestashop.responsive.current_width < prestashop.responsive.min_width;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (prestashop.responsive.mobile) {
        toggleMobileStyles();
    }
});

var windowWidth = $(window).innerWidth();
var windowMinWidth = 768;
var windowResponsiveMobile = windowWidth < windowMinWidth;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (windowResponsiveMobile) {
        $("*[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("*[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
}

$(window).on('resize', function() {
    var _cw = windowWidth;
    var _mw = windowMinWidth;
    var _w = $(window).innerWidth();
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    windowWidth = _w;
    windowResponsiveMobile = windowWidth < windowMinWidth;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (windowResponsiveMobile) {
        toggleMobileStyles();
    }
});

var windowWidth=$（window）.innerWidth（）；
var windowMinWidth=768；
var windowResponsiveMobile=windowWidth

目前它不工作，但我在控制台中没有看到任何错误，它有点混乱

请帮助我完成它，以便它可以工作。

var windowWidth=$（window.innerWidth（）；
var windowWidth = $(window).innerWidth();
var windowMinWidth = 768;
var windowResponsiveMobile = windowWidth < windowMinWidth;

function swapChildren(obj1, obj2)
{
    var temp = obj2.children().detach();
    obj2.empty().append(obj1.children().detach());
    obj1.append(temp);
}

function toggleMobileStyles()
{
    if (windowResponsiveMobile) {
        $("[id^='_desktop_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_desktop_', '_mobile_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    } else {
        $("[id^='_mobile_']").each(function(idx, el) {
            var target = $('#' + el.id.replace('_mobile_', '_desktop_'));
            if (target.length) {
                swapChildren($(el), target);
            }
        });
    }
}

$(window).on('resize', function() {
    var _cw = windowWidth;
    var _mw = windowMinWidth;
    var _w = $(window).innerWidth();
    var _toggle = (_cw >= _mw && _w < _mw) || (_cw < _mw && _w >= _mw);
    windowWidth = _w;
    windowResponsiveMobile = windowWidth < windowMinWidth;
    if (_toggle) {
        toggleMobileStyles();
    }
});

$(document).ready(function() {
    if (windowResponsiveMobile) {
        toggleMobileStyles();
    }
});

var windowMinWidth=768；
var windowResponsiveMobile=windowWidth

这是更新后的代码，您刚刚删除了目标选择器中的

id

。

var windowWidth=$（window.innerWidth（）；
var windowMinWidth=768；
var windowResponsiveMobile=windowWidth