將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代碼時出錯

回答

相關問題