javascript - onResize 事件复制对象

Question

我在处理 onResize 事件时遇到问题。我有一个 if/else 语句来检查窗口是否调整大小 < 768。代码效果很好，但是在每次调整大小时，它都会在每个调整大小事件触发器上复制我的前置。有没有办法让它只超过或低于 767 窗口大小？

<div class="author-wrap">
    <div class="the">Sample</div>
</div>

调整大小：

onResize = function() {
    var responsive_viewport = $(window).width();
    if (responsive_viewport < 768) {
        $('.the').prepend('<h3>Hi</h3>');
    } else {
    }
}
$(document).ready(onResize);
$(window).bind('resize', onResize);

这是 jsfiddle 上的代码，可以看到它的实际效果：http: //jsfiddle.net/K7Ugc/1/

Answer 1

检查前置元素是否已经存在。我想到了这个棘手的方法

onResize = function() {
    var responsive_viewport = $(window).width();
    var author_page = $('.main-content.author-archive');
    var author_name = $('h3.cat-label strong').text();
    var author_wrap = $('.author-wrap');
    if (responsive_viewport < 768) {
      if (!$('.the h3').text()){
        $('.the').prepend('<h3>Hi</h3>');
      }
    } else {
    }
}
$(document).ready(onResize);
$(window).bind('resize', onResize);

Answer 2

您是否希望它只运行一次？如果这是您要执行的操作，您可以取消绑定事件：

onResize = function() {
    var responsive_viewport = $(window).width();
    var author_page = $('.main-content.author-archive');
    var author_name = $('h3.cat-label strong').text();
    var author_wrap = $('.author-wrap');
    if (responsive_viewport < 768) {
        alert(responsive_viewport);
        $('.the').prepend('<h3>Hi</h3>');
        $(window).unbind();
    } else {
    }
}