Javascript 功能上的If/Else

我使用的是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

/paul的脚本：

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);

---

您的if需要更改为类似于：

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");
    }
}

---

使用

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");
    }
}

---

但是我不得不说感觉不太好。。。我会考虑两个单独的回调一个用于每个媒体查询。< /P>这并不影响浏览器的大小，这就是为什么我要使用保罗的脚本感谢，但这就是为什么我没有走那条路线：你从哪里得到<代码>最大宽度< /代码>变量？从<代码>最大宽度< /代码>将是一个不正确的变量名。（JavaScript将尝试从

max

中减去

width

，然后两者都找不到）；应该是

maxWidth

（对于CSS属性）或几乎任何其他字母数字字符序列，否则。

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");
    }
}