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

我有下面的代码，其中openNav函数被调用。将javascript代码转换成jquery代码时出错

<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是不确定的。

请说明是什么问题？感谢

来源

2016-05-17 Harshil Shah

我想，而不是使用jQuery的你应该使用这个功能。 'var text; function $（text）{return（document.querySelector（text））;}' –

纯jQuery的 - 你需要使用css方法

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

你的方法 - 或者干脆利用[0]索引来访问从jQuery对象的DOM元素

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

来源

2016-05-17 07:16:41 gurvinder372

谢谢。有效。你能告诉我把它转换成JQuery好吗？根据我的说法，JavaScript在所有浏览器中都无法正常工作，而JQuery没有这个问题和其他许多优点。 –

JQuery允许您编写跨浏览器代码。 – gurvinder372

变化

<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属性在这一方法已经过时

来源

2016-05-17 07:16:52

尝试删除opennav：

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

来源

2016-05-17 07:16:55 wajeeh

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

来源

2016-05-17 07:18:12

如果我删除点击事件它将如何调用函数。我在这里做的是当我点击'打开'它会打开导航边栏菜单。并删除点击事件不会这样做。这是我相信的。 –

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

来源

2016-05-17 07:21:08 JAIGANESH

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

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

入住这jsFiddle

来源

2016-05-17 07:23:26 brk

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

回答

相关问题