重要

Question

一旦屏幕宽度低于500px，我想在主体上添加一个元素。我使用下面的代码，但元素没有出现。希望有人能够帮助我吗？

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

Answer 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（）{}）; （如果你没有'已经），一旦浏览器有机会将所有HTML解析为DOM，它就会执行所有操作。

仅限CSS的方法

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

.hidden-link {
    display: none;
} 

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

    .hidden-link {
        display: inline;
    }

}

Answer 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/

jQuery - 一旦屏幕宽度低于500px，添加元素

2 个答案:

重要

仅限CSS的方法