javascript - JavaScript 中调整窗口大小时的 Hide() 和 show()

Question

当 anchor 元素宽度小于500px和.show()时，我尝试使用.hide()隐藏 anchor 元素当窗口大小大于 500px 宽度 时再次出现。

因此它会根据窗口大小而变化。

application.js

$(document).ready(function() {

 var windowWidth = $(window).width();

 function checkWidth() {
    if (windowWidth < 500) {
        $("#down-arrow a").hide()
    }
    if (windowWidth > 500){
        $("#down-arrow a").show()
    }
 }
 checkWidth() ;

 $(window).resize(function() {
   checkWidth() ;
 });
});

index.html

<div id="down-arrow">
   <a href="#"></a>
</div>

Answer 1

您必须在 checkWidth() 函数中获取当前宽度，以便它是最新值:

$(document).ready(function() {

 function checkWidth() {
    var windowWidth = $(window).width();
    if (windowWidth <= 500) {
        $("#down-arrow a").hide();
    } else {
        $("#down-arrow a").show();
    }
 }
 checkWidth();

 $(window).resize(checkWidth);
});

可能还应该更改其中一个比较以包含 500 值，以便在宽度恰好为 500 时执行某些操作。而且，我将代码切换为使用 if/else，而不是两个 if 语句。

您也可以只使用 .toggle() 并传递一个 bool 值:

$(document).ready(function() {

 function checkWidth() {
    $("#down-arrow a").toggle($(window).width() > 500);
 }
 checkWidth();

 $(window).resize(checkWidth);
});

而且，您也可以使用 CSS 媒体查询规则来实现所有这些，而不必使用 Javascript。