【问题标题】：jQuery - Add element once the screen width is below 500pxjQuery - 一旦屏幕宽度低于 500 像素就添加元素
【发布时间】：2014-01-05 19:57:44
【问题描述】：

一旦屏幕宽度低于 500 像素，我想向 body 添加一个元素。我使用了下面的代码，但该元素没有出现。希望有人能够帮助我吗？

$(window).resize(function(){
if ($(window).width() <= 500){  
  $("body").append("<a href="#">Home</a>");
} });

【问题讨论】：

检查您的控制台并注意引号。"<a href='#'>Home</a>"??
为什么不直接使用 CSS 和媒体查询？
一旦你修复了语法错误，你会发现你可能会添加数百个这样的元素，因为你会在窗口足够小的每个调整大小事件中添加一个。在添加之前，您需要确保它不存在。

标签： jquery media-queries add

【解决方案1】：

$(window).resize(function(){
    if ($(window).width() <= 500){  
        $("body").append("<a href='#'>Home</a>");
    }
});

注意散列标签周围的单引号（您的代码现在应该可以工作了）。

如果你想在双引号字符串中使用双引号，你的另一个选择是转义它们，例如：

"<a href=\"#\">Home</a>"

注意到反斜杠了吗？转义一个特殊字符。这种方法也应该适用于你。同样的工作方式相反。因此，总而言之，所有这些都将起作用：

"<a href=\"#\">Home</a>"

"<a href='#'>Home</a>"

'<a href=\'#\'>Home</a>'

'<a href="#">Home</a>'

请参阅这篇文章，jQuery API Documentation: String Quoting，了解更多信息。

重要

如果用户调整浏览器的大小，例如 3 次，那么您的脚本最终会附加 3 个不同的锚元素，我认为这不是您想要的。

因此，您可能会考虑将链接放在 HTML 页面中，然后使用 CSS 将其隐藏。然后，当用户低于 500px 时，您可以显示该元素，当用户高于 500px 时，您可以再次隐藏它，如下所示：

HTML：

<!--- everything else in the Body -->
<a class="hidden-link" href="#">Home</a>

CSS：

.hidden-link {
    display: none;
}

jQuery:

$(window).resize(function(){
    if ($(window).width() <= 500) {  
        $('.hidden-link').show();
    } else {
        $('.hidden-link').hide();
    }
});

另外，作为旁注，由于我没有看到您的其余代码，请确保您将所有内容放入 $(function() { }); （如果您没有t already)，一旦浏览器有机会将所有 HTML 解析到 DOM 中，它就会执行所有操作。

纯 CSS 方法

如果愿意，您可以简单地使用媒体查询：

.hidden-link {
    display: none;
} 

@media only screen 
and (max-width : 500px) {

    .hidden-link {
        display: inline;
    }

}

【讨论】：

【解决方案2】：

包含 HTML 代码的字符串中有语法错误。如果使用撇号分隔字符串，则可以在字符串内使用引号而不转义。

使用变量来跟踪您是否已经添加了元素。将检查大小的代码放在一个函数中，这样您就可以将其用作事件处理程序，也可以从一开始就直接调用它，以检查窗口是否已经足够小。

$(function(){

    var added = false; // keep track of whether the element is added

    function checkSize() {
        if (!added && $(window).width() <= 500) {
            $("body").append('<a href="#">Home</a>');
            added = true;
        }
    }

    $(window).resize(checkSize);

    checkSize(); // check from the start

});

演示：http://jsfiddle.net/Guffa/EYeCV/

【讨论】：