并非所有的 jquery 函数都在工作答案

【问题标题】：Not all jquery functions are working并非所有的 jquery 函数都在工作
【发布时间】：2015-12-19 07:31:55
【问题描述】：

我希望你能帮助我。我不会说谎；我对 ASP.Net 很陌生。我忙于一门课程； 在 Pluralsight 上使用 ASP.NET 5、MVC 6、EF7 和 AngularJS 构建 Web 应用程序，但无法解决我的问题：

我的问题： jquery 似乎适用于某些功能，但不适用于其他功能。它用于更新/更改用户名和菜单警报。折叠不起作用，更改主块颜色的功能也不起作用（此特定功能在 Firefox 中进行了大约 3 次测试，但在 Chrome 中从未起作用）。

项目的一些细节：

我在 VS 2015 中启动了一个空的 ASP.Net 5 项目
我已经通过 bower.json 方法安装了所需的包（下）：

{ "名称": "ASP.NET", “私人”：真的， “依赖”： "下划线": "~1.8.3", “jquery”：“~2.1.4” } }

这是我的 index.html 代码：

<!DOCTYPE html> <html> <head>   <meta charset="utf-8" />
    <title>The World</title>
    <link href="css/site.css" rel="stylesheet" /> </head> <body>
    <div id="sidebar">
        <img src="img/SamHastings.jpg" alt="headshot" class="headshot" />
        <span id="username">Sam Hastings</span>
        <ul class="menu">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
    <div id="wrapper">
        <div id="main">
            <div>
                <button id="sidebarToggle">Toggle Menu</button>
            </div>
            <h1>The World</h1>
            <p>This will be a fun website soon!</p>
            <form>
               <div>
                    <label>Date</label>
                    <input />
                </div>
                <div>
                    <label>Location</label>
                    <input />
                </div>
                <div><input type="submit" value="Add" /></div>
            </form>
        </div>
        <div id="footer">
            © 2015 The World Ltd.
        </div>
    </div>
    <script src="lib/jquery/dist/jquery.min.js"></script>
    <script src="js/site.js"></script> </body> </html>

这是我的 site.js 代码：

  var ele = $("#username");
    ele.text("Corne le Roux");
    var main = $("#main");
    main.on("mouseenter", function () {
        main.style = "background-color: #888;";
    });

    main.on("mouseleave", function () {
        main.style = "";
    });

    var menuItems = $("ul.menu li a");
    menuItems.on("click", function () {
        var me = $(this);
        alert(me.text());
    });

    var sidebarAndWrapper = $("#sidebar,#wrapper");
    $("sidebarToggle").on("click", function () {
        sidebarAndWrapper.toggleClass("hide-sidebar");
        if (sidebarAndWrapper.hasClass("hide-sidebar")) {
            $(this).text("Show Sidebar");
        } else {
            $(this).text("Hide Sidebar");
        }   
    });    
})();

这是我的 CSS：

#sidebar {
    background: #2a2c36;
    color: #eee;
    position: fixed;
    height: 100%;
    width: 250px;
    overflow: hidden;
    left: 0;
    margin: 0;
    -moz-transition: left ease .25s;
    -o-transition: left ease .25s;
    -webkit-transition: left ease .25s;
    transition: left ease .25s;
}
    #sidebar.hide-sidebar {
        left: -250px;
        -moz-transition: left ease .25s;
        -o-transition: left ease .25s;
        -webkit-transition: left ease .25s;
        transition: left ease .25s;
    }
#wrapper {
    margin: 0 0 0 250px;
    -moz-transition: margin-left ease .25s;
    -o-transition: margin-left ease .25s;
    -webkit-transition: margin-left ease .25s;
    transition: margin-left ease .25s;
}
    #wrapper.hide-sidebar {
        margin-left: 0;
        -moz-transition: margin-left ease .25s;
        -o-transition: margin-left ease .25s;
        -webkit-transition: margin-left ease .25s;
        transition: margin-left ease .25s;
    }

提前谢谢你！

【问题讨论】：

您的 jQuery 不正确。您不能以这种方式使用样式。 jQuery 使用方法，但不使用属性。
另外，不要在处理程序中使用变量。使用这个。
您好 Yeldar，感谢您的回复。我是 ASP.Net 的新手（以及一些使用的包）。你能不能给我更多的细节？在 Shawn Wildermuth 演示和教授的课程中，它运行良好。

标签： jquery asp.net

【解决方案1】：

您好，我遵循相同的教程，我这样解决了：

 var main = $("#main");
main.on("mouseenter", function () {
    main.css("background-color", "#888");
});

main.on("mouseleave", function () {
    main.css("background-color", "");
});

【讨论】：

感谢您的输入，并对迟到的回复感到抱歉。期间我还修了一些其他的课程，现在才重新学习了这门课程。 :) 不幸的是，您的解决方案对我不起作用。然而，这只是课程的一小部分，看起来没有使用。