Question

好的，尽管很多尝试都没有占上风，但是当窗口处于一定的宽度时，我一直在尝试使用以下JScript命令（不使用jQuery）来更改下面div的顺序; 特别是1024px及以下。使用的JScript成功执行并随后更改div的顺序，但它出现在所有宽度。

当窗口宽度等于或小于 1024px 时，我希望 box-3 高于 box-1 （不使用jQuery的）。

<html>
 <body>
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
 </body>
</html>

<script type="text/javascript">
 var content = document.querySelector('.box-3');
 var parent = content.parentNode;
 parent.insertBefore(content, parent.firstChild);
</script>

提前致谢！

编辑：问题不同于“基于屏幕大小的执行功能”（由Jim撰写），因为给予Jim的解决方案包括 - 并接受 - jQuery，而这个问题纯粹是为了香草Javascript < / p>

Answer 1

好吧，所以你使用window.onresize走在正确的轨道上。

建议编辑和好点：

如果您希望在调整窗口大小之前进行重新排序，请确保在使用window.onload打开页面时检查窗口的大小。为了使所有内容更简洁，您可以将重新排序代码放入函数中，让我们说myResizeFunction()，然后执行类似的操作

var needsReset = false;
window.onresize = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    } else {
        if( needsReset ) {
            //UNDO THE REORDER OR
            //WHATEVER CODE YOU WANT IF SCREEN IS LARGER THAN TARGET SIZE
        }
    }
}
window.onload = function() {
    if( this.innerWidth <= 1024 ) {
        myResizeFunction();
    }
    //NO ELSE BLOCK NEEDED BECAUSE
    //IF SCREEN SIZE ISN'T IN TARGET RANGE WE HAVE NOTHING TO UNDO
}
function myResizeFunction() {
    //NOW YOUR REORDER CODE LIVES HERE
    //SET needsReset TO true BECAUSE WE'VE CHANGED THE ORDER OF ELEMENTS
    needsReset = true;
}

我在移动电话上，因此我无法测试DOM的变化情况，而是尝试使用parent.lastChild。

如果您要移除.box-3然后将其插入.box-1前面（我相信这就是正在发生的事情），那么在insertBefore上执行parent.lastChild应该将盒子3放回原来的位置

仅在特定宽度下执行Jscript而不使用jQuery

1 个答案: