javascript - 使用 jQuery 调整事件大小，删除并重新添加 DOM 中的元素

Question

我正在尝试删除并重新添加 DOM 元素，该元素取决于屏幕尺寸，但无法使其正常工作。

这是我尝试过的:

HTML:

<div id="hideit">Some text</div>

JS:

require(['jquery'], function(){
    jQuery( document ).ready(function(){
        jQuery(window).resize(function(){
            var childhtml = jQuery("#hideit").detach();
            if(window.innerWidth < 990) {
            jQuery("#hideit").remove();
            }
            if(window.innerWidth > 990){
            jQuery("#hideit").append(childhtml);
            }
        });
    });
});

Answer 1

<强> Working fiddle 。

您必须先克隆它，然后才能在用户调整大小时删除/添加它:

jQuery(document).ready(function() {
  var hideit = jQuery("#hideit").clone(true);

  jQuery(window).resize(function() {
    var innerWidth = window.innerWidth;

    if (innerWidth < 990) {
      jQuery("#hideit").detach();
    } else if (innerWidth > 990) {
      if (!jQuery("#hideit").length) {
        jQuery("body").append(hideit);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hideit">Some text</div>