onResize事件重複對象

Question

我遇到了onResize事件。我有一個if/else語句來檢查窗口是否調整大小< 768.代碼工作的很好，但是在每次調整大小時，它都重複了我在每個調整大小事件觸發器上的前綴。有沒有辦法讓它發生超過或低於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 { 
    } 
}