Question

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

我在每个表单中都有一个表单，它应该使用ajax从db获取数据。每个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

＆＃13;

<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>

＆＃13;

Answer 1

你可以通过媒体查询获得纯CSS：

#mobile {
  display: none;
}

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

  #mobile {
    display: block;
  }
}

Answer 2

通过您尝试过的代码，您需要使用存储在变量

中的缓存版本

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，并且没有意义，因为两种形式都相同）

Answer 3

最好的解决方案是，<form>元素相同，只保留其中一个并使用

更改移动版本的CSS

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

这样您就可以管理所需的所有设备尺寸。

但是，如果你必须使用2个不同的<form>元素，正如@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);

}

Answer 4

<强> FIDDLE

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中的2个部分中，您只需要.detach()相关部分。希望它有所帮助

如何分离和重新附加元素

4 个答案: