javascript - 如何分离和重新附加元素

Question

我正在尝试调整页面以提高响应速度。我创建了 2 个 div - 一个用于移动分辨率，一个用于屏幕分辨率。

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

我需要在每个分辨率中分离一个 div 以使 ajax 请求正常工作，否则 - 请求无法处理具有相同名称和类的 2 个元素....

我已经尝试使用 display:none 在 css 中解决它 - 但仍然 - 元素出现了。

我希望实现的是分离(移动)并附加另一个。

我需要这样的东西:

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

    }

这是我的基本布局。 Fidddle

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container col-md-12">

  <div id="mobile" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>

  <div id="screen" class="col-md-12">

    <form class="form_filter" action="" method="post">
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customFrom" type="text" placeholder="From date" name="date_customFrom" class="form-control filter_dates" /><span class="form-control-feedback"></span>
      </div>
      <div data-provide="datepicker" class="input-group date has-feedback">
        <div class="input-group-addon"><i class="fa fa-calendar"></i>
        </div>
        <input id="date_customTo" type="text" data-toggle="tooltip" placeholder="To date" name="date_customTo" class="form-control filter_dates" /><span class="form-control-feedback">        </span>
      </div>
      <button type="submit" class="submit btn btn-primary btn-block">Submit</button>
    </form>

  </div>
</div>

Answer 1

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

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，并且毫无意义，因为两种形式是相同的)