在 <ul> 标签中更改类的 Javascript 不起作用答案

【问题标题】：Javascript to change class in <ul> tag not working在 <ul> 标签中更改类的 Javascript 不起作用
【发布时间】：2015-06-10 19:34:38
【问题描述】：

根据窗口的大小，我正在尝试更改标签的类：

<ul id="navul" class="nav navbar-nav">

并改为：

<ul id="navul" class="nav nav-pills">

这是我正在尝试的，但不起作用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $(window).resize(function () {
            $("count").text(x += 1);

            if ($window.width() < 768) {
                $('#navul')
                    .removeClass('navbar-nav')
                    .addClass('nav-pills');
            };
            if ($window.width() > 769) {
                $('#navul')
                    .removeClass('navbar-pills')
                    .addClass('nav-bar');
            };

        });
    });
</script>

我也试过把它包起来

$(document).ready(function () {
    ....
});

通过在开发工具中观察 DOM，脚本似乎根本没有触发。我可能遗漏了一些简单的东西。

编辑：

我用这个作为我的起始模板：

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize

这个脚本可以完美运行 $(window) 被声明。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
x = 0;
$(document).ready(function(){
    $(window).resize(function(){
        $("span").text(x += 1);
    });
});
</script>

<p>Window resized <span>0</span> times.</p>

【问题讨论】：

你有没有在任何地方声明过$window？
查看我原来的问题的编辑。如果您点击链接，示例脚本将起作用。我可以在我的页面上复制它。问题似乎出在更换班级。
您的编辑没有解决 $window 是 undefined 变量这一事实。
@CaseyCrookston no its $(window) not $window... 具体来说，您需要在窗口周围加上括号
正是@Nakib 所说的（只是括号，而不是括号）。您提供的链接完全不相关，因为您的代码中有错误。 $window 不是您在任何地方声明的变量。将$window 的所有实例更改为$(window)。

标签： javascript asp.net-mvc twitter-bootstrap navigation

【解决方案1】：

没有像 $window 这样的东西，它会给你错误并且不会运行脚本将 $window.width() 更改为

$(window).width()

$window 会给你未定义的错误

【讨论】：

查看我原来的问题的编辑。如果您点击链接，示例脚本将起作用。我可以在我的页面上复制它。问题似乎出在更换班级。
"如果您点击链接，示例脚本可以工作。"该链接不使用 $window。
@CaseyCrookston 尝试一些控制台日志记录
ok 好的 - 它确实使用了 $(window)。但它不使用 $(window).width.
是的，你需要在窗口周围加上括号，否则你会得到错误

【解决方案2】：

可能是因为您的 $window 变量未定义？
试试这个：

<script type="text/javascript">
    var $window = $(window);
    $window.resize(function () {
        if ($window.width() < 768) {
            if ($('#navul').hasClass('navbar-nav')) {
                $('#navul').removeClass('navbar-nav').addClass('nav-pills');
            }
        };
        if ($window.width() > 769) {
            if ($('#navul').hasClass('nav-pills')) {
                $('#navul').removeClass('nav-pills').addClass('navbar-nav');
            }
        };
    });
</script>

【讨论】：

查看我原来问题的编辑。如果您点击链接，示例脚本将起作用。我可以在我的页面上复制它。问题似乎出在更换班级。

【解决方案3】：

$(window).resize(function () {
  $('#navul')
    .removeClass('navbar-nav nav-pills')
    .addClass(($(window).width() < 768 ) ? 'nav-pills' : 'navbar-nav');
});

【讨论】：

查看我原来问题的编辑。如果您点击链接，示例脚本将起作用。我可以在我的页面上复制它。问题似乎出在更换班级。
尝试确定是否是选择器本身的问题。例如从浏览器的控制台运行类似：$('#navul').attr('test', 'worked')。如果这不起作用，我猜你可能有重复的 id。