JS matchMedia if語句

我試圖觸發我的fancybox視口> = 768px並觸發我的swipebox視口< 768px。不幸的是沒有人現在打開...我錯過了什麼？感謝您的幫助！我有噸的CSS，因此我只是添加JS（我很確定這是一個語法錯誤...）。JS matchMedia if語句

// JavaScript Document 
 

 
$(document).ready(function() { 
 
if (window.matchMedia("(min-width: 768px)").matches) { 
 
    
 
\t $(".fancybox").fancybox({ 
 
\t \t //width: '70%', 
 
\t \t //height: '70%', 
 
     helpers: { 
 
     overlay: { 
 
      locked: false 
 
     } 
 
     }, 
 
    'beforeLoad': function(){ 
 
     disable_scroll(); 
 
     }, 
 
    'afterClose': function(){ 
 
     enable_scroll(); 
 
     } 
 
\t \t 
 
\t }); 
 
\t 
 
}); 
 
var keys = [37, 38, 39, 40]; 
 

 
    function preventDefault(e) { 
 
     e = e || window.event; 
 
     if (e.preventDefault) e.preventDefault(); 
 
     e.returnValue = false; 
 
    } 
 

 
    function keydown(e) { 
 
     for (var i = keys.length; i--;) { 
 
      if (e.keyCode === keys[i]) { 
 
       preventDefault(e); 
 
       return; 
 
      } 
 
     } 
 
    } 
 

 
    function wheel(e) { 
 
     preventDefault(e); 
 
    } 
 

 
    function disable_scroll() { 
 
     if (window.addEventListener) { 
 
      window.addEventListener('DOMMouseScroll', wheel, false); 
 
     } 
 
     window.onmousewheel = document.onmousewheel = wheel; 
 
     document.onkeydown = keydown; 
 
    } 
 

 
    function enable_scroll() { 
 
     if (window.removeEventListener) { 
 
      window.removeEventListener('DOMMouseScroll', wheel, false); 
 
     } 
 
     window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
 
    } 
 
} else { 
 
    ;(function($) { 
 

 
\t $('.swipebox').swipebox(); 
 

 
})(jQuery); 
 
}

來源

2015-10-13 Ollie

「我很確定這是一個語法錯誤」 - 是什麼讓你這麼說？如果您知道錯誤，請將其添加到問題中。運行時看到了控制檯嗎？ – Christian

當我談到JS的時候，我是一個新手......我說因爲單獨的swipebox和fancybox有效，但是和if語句一起沒有任何事情發生（沒有lightbox打開）......因此，我假定它必須是一個語法錯誤。我試着在控制檯中理解它，但它對我來說太高級瞭解.. – Ollie

打開Chrome，打開開發工具（菜單>更多工具>開發人員工具），然後控制檯（或者，如果您在Mac上， +命令+ J）。然後刷新頁面。嚴肅地說，除非您可以使用控制檯進行基本的故障排除，否則我們不會走得太遠。 – Christian

試試這個。我也會更新小提琴。

Fiddle here。

$(document).ready(function() { 
if (window.matchMedia("(min-width: 768px)").matches) { 

    $(".fancybox").fancybox({ 
    //width: '70%', 
    //height: '70%', 
     helpers: { 
     overlay: { 
      locked: false 
     } 
     }, 
    'beforeLoad': function(){ 
     disable_scroll(); 
     }, 
    'afterClose': function(){ 
     enable_scroll(); 
     } 

    }); 


var keys = [37, 38, 39, 40]; 

    function preventDefault(e) { 
     e = e || window.event; 
     if (e.preventDefault) e.preventDefault(); 
     e.returnValue = false; 
    } 

    function keydown(e) { 
     for (var i = keys.length; i--;) { 
      if (e.keyCode === keys[i]) { 
       preventDefault(e); 
       return; 
      } 
     } 
    } 

    function wheel(e) { 
     preventDefault(e); 
    } 

    function disable_scroll() { 
     if (window.addEventListener) { 
      window.addEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = wheel; 
     document.onkeydown = keydown; 
    } 

    function enable_scroll() { 
     if (window.removeEventListener) { 
      window.removeEventListener('DOMMouseScroll', wheel, false); 
     } 
     window.onmousewheel = document.onmousewheel = document.onkeydown = null; 
    } 
} else { 
    (function($) { 

    $('.swipebox').swipebox(); 

    })(jQuery); 
} 
});

來源

2015-10-13 23:15:20 Christian

工程！非常感謝！！ – Ollie

沒有probs。 :)只是一些小的語法問題。 – Christian

JS matchMedia if語句

回答

相關問題