每当 window 调整大小时，将内容从一个 DIV 传输到另一个

Question

每当浏览器 window 调整到特定大小或更小时，我正在尝试将一些内容从一个 DIV 传输到另一个。这是我的代码：

$(function () {

    function transferContent() {
        if ($(this).height() < 500) $(".target").html($(".source").html());
    }

    $(window).on("resize", transferContent);

});

这是 fiddle：https://jsfiddle.net/76yjw0rs/

请告诉我怎么做？

Answer 1

您可能想检查 window 高度是否小于 500，但您使用 $(this).height()。将 $(this) 重写为 $(window).

Answer 2

$(function() {
  var content = $('.source').html();

  function transferContent() {
    if ($(this).height() < 500) {
      $(".target").html(content);
        $(".source").empty();
    }
    else{
      $(".source").html(content);
        $(".target").empty();
      }
  }
  $(window).on("resize", transferContent);

});

.target {
  background-color: black;
  height: 100px;
  width: 100px;
  color: white
}
.source {
  color: white;
  background-color: brown
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="target"></div>
<div class="source">CONTENT</div>

每当 window 调整大小时，将内容从一个 DIV 传输到另一个

Transfer content from one DIV to another whenever window resizes

html

javascript

css

jquery

resize