Javascript 如何分离和重新附着图元

我正在尝试调整页面，使其更具响应性。我已经创建了两个div-一个用于移动分辨率，一个用于屏幕分辨率

我在每个表单中都有一个表单，它应该使用ajax从db中获取数据。每个div包含相同的元素：表单、输入和提交按钮

我需要在每个解析中分离一个div，ajax请求才能工作，因为否则，请求无法处理具有相同名称和类的2个元素

我曾尝试在css中使用

display:none

——但仍然出现了元素

我希望实现的是分离（手机）并连接另一个

我需要这样的东西：

var screen = $('#screen');
var mobile = $('#mobile');

    if ($(window).width() > 916) {

        $('#screen').detach();
        $('#mobile').append('.container');//this won't work

    }
    else {
        $('#mobile').detach();
        $('#screen').append('.container');//this won't work

    }

这是我的基本布局

提交
提交

您可以通过媒体查询使用纯CSS：

#mobile {
  display: none;
}

@media (max-width: 916px) {
  #screen {
    display: none;
  }

  #mobile {
    display: block;
  }
}

var screen = $('#screen');
var mobile = $('#mobile');

if ($(window).width() > 916) {

  $('#screen').detach(); //only remove #screen element from the html
  //$('#mobile').append('.container'); //this won't work

} else {
  $('#mobile').detach(); //only remove #mobile element from the html
  //$('#screen').append('.container'); //this won't work

}

---

我已经在这里用相关显示对视图进行了评论。您不需要调用

.append（）

，因为html最初同时加载了两个部分（屏幕和移动部分）。只有在javascript计算了屏幕宽度之后，相关部分才会被分离。因此，在html中来自服务器的两个部分中，您只需要

.detach（）

相关部分。希望对您有所帮助

根据您尝试的代码，您需要使用存储到变量的缓存版本

var screen = $('#screen');
var mobile = $('#mobile');

if ($(window).width() > 916) {

    $('#screen').detach();
    mobile.appendTo('.container'); //this should now work
}
else {
    $('#mobile').detach();
    screen.appendTo('.container'); //this should now work
}

---

但是你应该通过CSS和媒体查询来解决这个问题。

---

（您当前的代码存在问题，因为它在HTML中包含重复的ID，这是毫无意义的，因为两种形式都相同）

最好的解决方案是，在

元素相同的情况下，只保留其中一个元素，并使用

@media (max-width: 916) {
   form input {
      /* your input css for mobile version */
   }
}

以便您可以管理所需设备的所有尺寸

但是，如果您必须使用两个不同的

元素，正如@Carl Edwards所指出的，您应该能够隐藏其中一个元素，并且在提交数据时不会出现问题

如果您在获取数据时遇到问题，因为您获取了页面中包含的所有数据，您可以尝试使用以下方法

$('form').submit(function(){ var data = $(this).serialize(); }

或者，如果您有一个直接获取

$（'form'）

的函数，请使用

$（'form:visible'）

如果您确实需要分离元素，请使用

var screen = $('#screen').detach();
var mobile = $('#mobile').detach();

if ($(window).width() > 916) {

    $('#screen').detach();
    $('.container').append(mobile);

}
else {
    $('#mobile').detach();
    $('.container').append(screen);

}

---

使用响应式样式表似乎比在调整窗口大小时攻击DOM更合适。另外，表单的两个版本似乎相同？如果您想继续使用现有的模式，我建议只使用

show（）

和

hide（）

而不是添加或删除整个元素。我假设此代码位于

resize

事件处理程序中？如果两者都包含相同的数据和元素，为什么需要两个？？为什么不使用CSS mediaqueries来更改样式呢？Carl Edwards-我在开始时尝试过它，但它不起作用-问题在于附加元素…要使其起作用，您需要使用

appendTo（'.container'）

，而不是

append（）

，并在

$（窗口）中运行代码。resize（）

事件处理程序：。我不打算把这个作为一个答案，因为坦率地说，这是一个可怕的解决问题的办法。你真的应该使用CSS，因为@CarlEdwards的答案表明你不知道为什么这会被否决。这是一个比OP尝试的好得多的主意。更好的做法是使用相同的元素，但在媒体设置之间更改它们的显示属性。我尝试在css中使用display来解决这个问题：无-但仍然-元素出现。。。。。元素仍然出现在DOM上，因此ajax请求无法工作。。。dup ID’s和更多虽然这可以从理论上回答这个问题，但在这里包括答案的基本部分，并提供链接供参考。谢谢。更新@RoryMcCrossanOk-我投降-我将使用css:）