onResize事件复制对象

Question

我在onResize事件上遇到了麻烦。我有一个if/else语句，用于检查窗口大小是否调整为小于768。代码运行得很好，但每次调整大小时，它都会在每次调整大小事件触发器上复制我的prepend。有没有办法让它只超过或低于767窗口大小？

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

onResize：

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