If/Else on功能

Question

我正在使用Paul Hayes的CSS转换媒体查询脚本，并无法弄清楚如何做简单的if/else。

这里是我会后：

mql('all and (max-width: 959px)', change); 
mql('all and (min-width: 960px)', change); 

function change(mql) { 
    if(max-width: 959px) { 
     console.log("Do this"); 
    } else { 
     console.log("Do that"); 
    } 
} 

这里是mql /保罗的脚本：

mql = (function(doc, undefined) { 

    var docElem = doc.documentElement, 
     refNode = docElem.firstElementChild || docElem.firstChild, 
     idCounter = 0; 
     if(!doc.getElementById('mq-style')) { 
      style = doc.createElement('style'); 
      style.id = 'mq-style'; 
      style.textContent = '.mq { -webkit-transition: width 0.001ms; -moz-transition: width 0.001ms; -o-transition: width 0.001ms; -ms-transition: width 0.001ms; width: 0; position: absolute; top: -100em; }\n'; 
      docElem.insertBefore(style, refNode);   
     } 

    var transitionEnds = Array('transitionend','webkitTransitionEnd','oTransitionEnd','msTransitionEnd'); 

    for(var i in transitionEnds) { 
    if ('on'+ transitionEnds[i].toLowerCase() in window) transitionEnd = transitionEnds[i]; 
    } 

    return function(q, cb) { 

     var id = 'mql-' + idCounter++, 
      callback = function() { 
       // perform test and send results to callback 
       cb({ 
        matches: (div.offsetWidth == 42), 
        media: q 
       }); 
      }, 
      div = doc.createElement('div'); 

     div.className = 'mq'; // mq class in CSS declares width: 0 and transition on width of duration 0.001ms 
     div.id = id; 
     style.textContent += '@media ' + q + ' { #' + div.id + ' { width: 42px; } }\n';   

     // add transition event listener 
     div.addEventListener(transitionEnd, callback, false); 

     docElem.insertBefore(div, refNode); 

     // original polyfill removes element, we need to keep element for transitions to continue and events to fire. 

     return { 
      matches: div.offsetWidth == 42, 
      media: q 
     }; 
    }; 

})(document); 

Answer 1

我可以选择的唯一方法他与在change功能所提供的信息来完成是这样的：

mql('all and (max-width: 959px)', change); 
mql('all and (min-width: 960px)', change); 

function change(mql) { 
    if(mql.media.indexOf('max-width: 959px') !== -1 && mql.matches) { 
     console.log("Do this"); 
    } else { 
     console.log("Do that"); 
    } 
} 

但我不得不说，它不觉得好......我会考虑两个单独的回调为每个媒体查询。

Answer 2

你如果需要改变的东西类似于：

mql('all and (max-width: 959px)', change); 
mql('all and (min-width: 960px)', change); 

function change(mql) { 
    if(max-width == '959px') { 
     console.log("Do this"); 
    } else { 
     console.log("Do that"); 
    } 
} 

Answer 3

var mq = window.matchMedia("(min-width: 959px)"); 
mq.addListener(WidthChange); 
WidthChange(mq); 

function WidthChange(mq) { 
    if (mq.matches) { 
     console.log("Do this"); // window width is at least 959px 
    } else { 
     console.log("Do this"); // window width is at less than 959px 
    } 
}