jQuery 多个 else if 语句答案

【问题标题】：jQuery multiple else if statementsjQuery 多个 else if 语句
【发布时间】：2014-02-01 15:09:49
【问题描述】：

我正在尝试根据窗口高度大小在 div 上设置填充。我根本找不到更好的工作方式来将我的内容 div 垂直居中在另一个尺寸未知的 div 中。我的代码如下：

<script>
    $(document).ready(function(){ 
        var window_height = $(window).height();
        var home_content = $('#home-content');

            if(window_height <= 600) {
                home_content.css({"padding-top", "13px"});
            } else if(window_height > 600 && window_height <= 768) {
                home_content.css({"padding-top", "97px"});
            } else if(window_height > 768 && window_height <= 800) {
                home_content.css({"padding-top", "113px"});
            } else if(window_height > 800 && window_height <= 900) {
                home_content.css({"padding-top", "163px"});
            } else if(window_height > 900 && window_height <= 1050) {
                home_content.css({"padding-top", "238px"});
            } else if(window_height > 1050 && window_height <= 1080) {
                home_content.css({"padding-top", "253px"});
            } else if(window_height > 1080 && window_height <= 1200) {
                home_content.css({"padding-top", "313px"});
            } else {

            }
     });
    </script>

它不工作。我的网站卡在预加载器上，根本无法加载任何内容。有什么想法我在哪里做错了吗？

【问题讨论】：

当没有任何工作时检查“控制台”。你应该在那里得到一些输出。
您可以通过删除每个 && 运算符左侧的测试来清理您的代码。例如，您的第一个if() 已经测试过它是否为<= 600，但失败了，因此无需测试它是否为> 600，因为您已经知道它是。 ...像这样：jsfiddle.net/aa5aK
你想做什么，在容器中垂直居中一个 div？

标签： javascript jquery if-statement

【解决方案1】：

尝试改变：

{"padding-top", "13px"}

到：

{"padding-top":"13px"}

等等……

注意

问题是您可以通过两种方式为 jquery 分配 css 样式：

$("#element").css('padding', '30px');

（如果您想编辑/添加一个样式设置），或者：

$("#element").css({'padding':'30px'});

（使用此方法，您可以添加任意数量的设置，只需将它们用, 分隔，感谢@dollarvar 指出这一点）。

你的代码中的问题是你有一个 , 而不是 :。

【讨论】：

你有正确的选择器 ($("#home-content")) 吗？
@MomchilKaramitev 给我们控制台的输出，你知道那是什么吗？
@DanielLisik 好的，你只需要补充一点，.css() 只支持一种样式设置，而.css({}) "object" 有几个......或围绕这一行。那么你这里有最完整的.css101。 ;)
我尝试了使用 : 而不是的方法，但它在控制台中给了我错误，所以我将它改回 "," 现在它可以工作了。我想我只需要从 .css 属性中删除花括号。谢谢大家的帮助！
可能在没有{ 和} 的情况下尝试了:。了解基本语法和阅读文档有一些话要说。

【解决方案2】：

试试这个，你可以删除{}并使用

 home_content.css("padding-top", "13px");

而不是

home_content.css({"padding-top", "13px"});

【讨论】：

我认为这确实有帮助。我的网站现在加载得很好，并且填充应用于元素。谢谢！

【解决方案3】：

作为替代 JavaScript hack 的替代方法，您可以使用 CSS Media Queries 指定要应用的 CSS 规则 (example)。这确实取决于您需要支持哪些浏览器，http://caniuse.com/css-mediaqueries。

@media (max-height : 599px) {
    #home-content { padding-top: 13px; }
}

@media (min-height : 768px) {
    #home-content { padding-top: 97px; }
}

@media (min-height : 800px) {
    #home-content { padding-top: 113px; }
}

@media (min-height : 900px) {
    #home-content { padding-top: 163px; }
}

...

这也会在您调整浏览器窗口大小时自动更改填充，这与用于响应式设计的技术相同。

编辑：

但是，重新阅读您的实际问题，您似乎正试图在容器中垂直居中 div。你真的不需要使用任何 Javascript，你可以用 CSS 完全做到这一点，它会更流畅：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

html, body {
  height: 100%; 
  margin: 0;
  padding: 0;
}

.container { 
  height: 100%; 
  position: relative;
}

#home-container { 
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: 1px solid red;
}

codepen example

【讨论】：