Question

我遇到了onResize事件的问题。我有一个if / else语句来检查窗口是否调整大小＆lt; 768.代码工作得很好但是在每次调整大小时，它都会重复我在每个resize事件触发器上的前置。有没有办法让它只超过或低于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 {
    }
}

onResize事件复制对象

2 个答案: