Question

我有以下代码，其中调用了openNav函数。

<div id="main">
        <h2>Sidenav Push Example</h2>
        <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
        <span id="sp1" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
    </div>

我有正常的Javascript代码

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

我试图在jquery中转换它，但它显示错误openNav未定义。

<script type="text/javascript">
 $('#sp1').click(function openNav() {
        $('#mySidenav').style.width = "250px";
        $('#main').style.marginLeft = "250px";
    })
</script>

它编译并正常运行但是当我点击open (onclick event)时，它会抛出一个异常，即openNav未定义。

请解释一下是什么问题？感谢

Answer 1

纯jQuery - 您需要使用css方法

    $('#mySidenav').css( "width", "250px" );
    $('#main').css( "margin-Left", "250px");

您的方法 - 或者只是使用[0]索引从jquery对象访问DOM元素

   $('#mySidenav')[0].style.width = "250px";
    $('#main')[0].style.marginLeft = "250px";

Answer 2

    <html>
            <head>
            <title>Sample Page</title>
            </head>

        <body>
             <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <div id="main">
                <h2>Sidenav Push Example</h2>
                <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
                <span id="sp1" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
            </div>
            <script type="text/javascript">
                function openNav() {
                 $('#mySidenav').css( "width", "250px" );
                 $('#main').css( "margin-Left", "250px");
               }
        </script>
        </body>

        </html>

Answer 3

更改

<script type="text/javascript">
 $('#sp1').click(function openNav() {
        $('#mySidenav').style.width = "250px";
        $('#main').style.marginLeft = "250px";
    })
</script>

要：

<script type="text/javascript">
 $('#sp1').click(function(){
        $('#mySidenav').css({"width":"250px"});
        $('#main').css({"magin-left":"250px"});
    })
</script>

并从您的html中移除onclick属性，在此方法中已过时

Answer 4

尝试删除opennav：

<script type="text/javascript">
    $('#sp1').click(function() {
        $('#mySidenav').css('width', "250px");
        $('#main').css('marginLeft', "250px");
    })
</script>

Answer 5

如果你想使用jquery，请从html中删除点击功能：

<div id="main">
        <h2>Sidenav Push Example</h2>
        <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
        <span id="sp1" style="font-size:30px;cursor:pointer">☰ open</span>
    </div>

Jquery的：

<script type="text/javascript">
 $('#sp1').click(function() {
        $('#mySidenav').css('width','250px'); 
        $('#main').css('margin-left','250px');
 });
</script>

Answer 6

如果您使用$('#sp1').click(function openNav() { ..})，您可能会看到错误openNav未定义

function openNav() {
         $('#mySidenav').css( "width", "250px" );
    $('#main').css( "margin-Left", "250px");
    }

选中此jsFiddle

将javascript代码转换为jquery代码时出错

6 个答案: