javascript - 变量范围或选择器问题

Question

谁能帮我解释一下为什么在运行这段代码后maxWidth仍然等于-1？ https://jsfiddle.net/nfy7xboL/注意:当我只使用 $("menu-item") 选择器时，代码按预期工作

我不知道我是否在使用 javascript 变量时遇到问题或什么，但我想如果我设置 var menuItem = $("menu-item"); 并替换.load() 函数，它将具有与运行 $("menu-item").each(...

相同的输出

编辑:完整脚本文件+ HTML:https://jsfiddle.net/nfy7xboL/7/

HTML

<div class="menu-primary-menu-container">
    <ul id="menu-primary-menu" class="menu">
        <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-11" style="width: 282px;"><a href="http://192.168.33.10/">Home</a>

        </li>
        <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-13" style="width: 282px;"><a href="http://192.168.33.10/hourslocation/">Hours/Location</a>

        </li>
        <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14" style="width: 282px;"><a href="http://192.168.33.10/menu/">Menu</a>

        </li>
        <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52" style="width: 282px;"><a href="http://192.168.33.10/mooooooooooreeeee/">MOOOOOOOOOOREEEEE</a>

        </li>
        <li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57" style="width: 282px;"><a href="http://192.168.33.10/more-stuff/">more stuff</a>

        </li>
        <li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58" style="width: 282px;"><a href="http://192.168.33.10/even/">even</a>

        </li>
    </ul>
</div>

JS

var menuItem = $("menu-item");
var menuContainer = $(".menu-primary-menu-container");
var maxWidth = -1;

$(window).load(function () {
    //declare variables
    var resizeTimer;

    var count = $(".menu-item").length;
    console.log(menuItem);
    // Loop menu items, and retrieve greatest width, to be multiplied by count
    console.log(menuItem);
    menuItem.each(function () {
        maxWidth = Math.max(maxWidth, $(this).width());
        console.log(maxWidth);
    });
    console.log(maxWidth);
    // Only resize li elements if screen width is greater than menu width
    if ($(window).width() > maxWidth * count) {
        resize_menu();
    } else {
        // or else show the mobile menu
        mobile_menu();
    };
    // On a resize (delayed for performance)
    $(window).on('resize', function (e) {
        console.log(maxWidth);
        //clearTimeout(resizeTimer);
        //resizeTimer = setTimeout(function() {
        // again, if window is less than menu, show mobile 
        if ($(window).width() < maxWidth * count) {
            mobile_menu();
        } else {
            // or else, show regular menu
            // Note: resize, incase screen was loaded smaller than menu

            $("#menu-primary-menu").removeAttr('style');
            $("#menu-primary-menu").removeAttr('width');
            $(".menu-primary-menu-container ul li").css("display", "inline-block");
            $(".menu-primary-menu-container ul li a").css("min-height", "70px");
            $(".menu-primary-menu-container ul li").css("width", maxWidth);
            show_menu();
        };
        //}, 50);
    });

    // if the mobile menu icon is clicked, show menu
    $("#mobile-menu").click(function () {
        $("#menu-primary-menu").css("max-width", "960px");
        $("#menu-primary-menu").css("margin", "0 auto");
        $(".menu-primary-menu-container ul li").css("width", "100%");
        $(".menu-primary-menu-container ul li").css("display", "block");
        $(".menu-primary-menu-container ul li a").css("min-height", "40px");
        show_menu();
    });
});

function resize_menu() {

    var maxWidth = -1;

    $(".menu-item").each(function () {
        maxWidth = maxWidth > $(this).width() ? maxWidth : $(this).width();
    });

    $(".menu-item").each(function () {
        $(this).width(maxWidth);
    });
}

function mobile_menu() {
    $(".menu-primary-menu-container").css("display", "none");
    $("#mobile-menu").css("display", "block");
}

function show_menu() {
    $("#mobile-menu").css("display", "none");
    $(".menu-primary-menu-container").css("display", "initial");
}

Answer 1

这是 HTML:

<ul>
    <li class="menu-item">Text</li>
    <li class="menu-item">More Text</li>
    <li class="menu-item">The longest Text</li>
</ul>

其次是CSS代码:

li { display: inline-block; }

最后是 JS 脚本:

menuItem = $(".menu-item");
var maxWidth = -1;

$(document).ready(function() {
    menuItem.each(function() {
        maxWidth = Math.max(maxWidth, $(this).width());
    });

    alert('max width: ' + maxWidth);
});

这里还有一个 jsfiddle:https://jsfiddle.net/nfy7xboL/17/