Question

我正在我们网站的标题上设置A / B测试。我们的软件工作方式，我不能设置CSS样式，除非：

类/ ID对于一种变体是唯一的。
您希望将css应用于所有变体。

所以我要做的是使用jQuery重新创建媒体查询，以便我可以重新设置标题，确保它在所有大小上都能正确显示。这就是我到目前为止所做的：

$(document).ready(function(){

    var width = $(window).width();
    if (width > 1380) {
        $("logo").css("margin-top","0");
     } elseif ((width <= 1380) && (width > 1020))  {
        $("logo").css("margin-top","100px");
     } elseif ((width <= 1020) && (width > 750))  {
        $("logo").css("margin-top","40px");
     } elseif (width <= 750)  {
        $("logo").css("margin-top","150px");
     }

});

当我将它插入到程序中时，它会返回错误，指出else if语句后应该有分号，例如：

elseif ((width <= 1380) && (width > 1020))

应该是

elseif ((width <= 1380) && (width > 1020));

所以我在每个elseif上解决了这个问题，在完成之后我得到一个错误，说$（window）.width（）;不是一个功能。有人对此有任何意见吗？我完全迷失了这里出了什么问题。我真的很感激任何帮助。

Answer 1

else if有空格

$(document).ready(function(){

    var width = $(window).width();
    if (width > 1380) {
        $("logo").css("margin-top","0");
     } else if ((width <= 1380) && (width > 1020))  {
        $("logo").css("margin-top","100px");
     } else if ((width <= 1020) && (width > 750))  {
        $("logo").css("margin-top","40px");
     } else if (width <= 750)  {
        $("logo").css("margin-top","150px");
     }

});

当口译员看到elseif(...)时，它看起来像是一个函数调用，这就是为什么它会告诉您添加;

Answer 2

您应该使用@media css元素执行此操作：

@media screen and (min-width: 1380px) {
    .logo {
        margin-top: 0px;
    }
}
@media screen and (min-width: 1020px) and (max-width: 1379px) {
    .logo {
        margin-top: 100px;
    }
}

诸如此类

Answer 3

在javascript中你不会这样做。

你必须使用else if。看看这个：http://www.w3schools.com/js/js_if_else.asp

但是，毕竟，你应该使用@media查询

来做到这一点

@media screen and (min-width: 1024px) and (max-width: 1380px) { 
    // do stuff 
}

Answer 4

考虑与其他多个ifs相对的Switch Case：

switch(true){
      case(width > 1380):
          //Do stuff
      break;
      case((width <= 1380) && (width > 1020)):
          //Do stuff
      break;
      case((width <= 1020) && (width > 750)):
          //Do stuff
      break;
      default:
          // Do stuff if nothing above works

}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

另外，对于Else来说，正确的santax如果 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else

使用jQuery

4 个答案: