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/

Answer 2

由于menu-item是li元素的类名，因此您应该使用类选择器选择它们：

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

请在此处查看修改后的代码https://jsfiddle.net/nfy7xboL/13/，其中打印{28}的maxWidth。

Answer 3

除非您定义了HTML代码<menu-item>，否则$("menu-item")无法正常运行。请参阅Selectors上的jQuery文档，了解如何使用它们来检索所需的元素。

由于您有<li class="menu-item"></li>，因此您想使用$(".menu-item")：

班级选择器（＆＃34; .class＆＃34;）
选择具有给定类的所有元素。

变量范围或选择器问题

3 个答案: