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

Error while converting javascript code to jquery code

本文关键字：代码 出错 jquery 转换 javascript      更新时间：2023-09-26

我有下面的代码，其中调用了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未定义。

请解释一下问题出在哪里？感谢

Pure jQuery-您需要使用css方法

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

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

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

    <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>

更改

<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属性，它在这种方法中是过时的

如果您想使用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>

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

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

检查此jsFiddle

尝试删除opennav:

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