即使將jquery包含在我的html中後，jquery仍然沒有運行

所以我試圖把我的jquery放在一個保存爲script.js的js文件夾中，然後在我的html中調用該文件。所以我試圖在我的CSS之前調用它，在我的CSS之後，甚至剛好在我的末端還沒有運行我的jquery的地方。任何人都能識別我的問題？以下是我試圖打電話給我的script.js在我的index.php即使將jquery包含在我的html中後，jquery仍然沒有運行

<!DOCTYPE HTML> 
<html> 
<head> 
<?php include '/php/db.php'; ?> 
<link rel="stylesheet" href="style.css"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 

<script type = "text/javascript" src="js/script.js"></script> 

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Paprika" rel="stylesheet"> 



<title>YFC</title> 
</head> 

<body> 


    <div id = "container" method="post"> 
     <div class="signup"> 
      <h1>Sign up</h1> 
      <form action="/action_page.php"> 
       <input class="pop" type="text" name="Sname" placeholder="Fill in your name!"><br><br><br> 

       <input class="pop" type="password" name="Slastname" placeholder="Fill in your last name!"><br><br><br> 

       <input class="pop" type="text" name="Susername" placeholder="Fill in your username!"><br><br><br> 

       <input class="pop" type="password" name="Spassword" placeholder="Fill in your password!"><br><br><br> 

       <input class="pop" type="password" name="SRpassword" placeholder="Repeat your password!"><br><br><br> 
       <input class="sbutton" type="submit" value="Submit"> 
      </form> 
     </div> 

     <div class="signin"> 
      <h1>Log in</h1> 
      <form action="/action_page.php" method="post"> 
       <input class="pop" type="text" name="Lusername" placeholder="Fill in your username!"> <br><br><br> 
       <input class="pop" type="password" name="Lpassword" placeholder="Fill in your username!"> <br><br><br> 
       <input class="lbutton" type="submit" value="Log in"> 

      </form> 
     </div> 

    </div> 

</body> 
</html>

這裏是我的jQuery代碼

$('.pop').mouseenter(function(){ 
    $(this).css('width',300); 
}); 

$('.pop').mouseleave(fucntion(){ 
    $(this).css('width',280)     

});

來源

2017-03-31 user6086258

嘗試包裝你這個'$（文件）的內部代碼。就緒（函數（）{ }）' –

你在瀏覽器的控制檯中遇到什麼錯誤？ – j08691

你需要在你的JS代碼時，DOM可供使用。現在，您正試圖在存在元素之前使用.pop元素。

要在jQuery的做到這一點，你可以使用的document.ready事件處理程序：

$(function() { 
    $('.pop').mouseenter(function() { 
    $(this).css('width', 300); 
    }).mouseleave(function() { 
    $(this).css('width', 280)     
    }); 
});

但是有幾件事情，這裏要注意，可以提高代碼的質量。首先，你不應該把CSS規則放在你的JS代碼中。而是創建類，然後使用任何jQuery類修改方法（addClass()，removeClass()，toggleClass()）根據需要添加/刪除它。

您也可以使用hover()在mouseenter和mouseleave事件下運行代碼。如果夫婦與toggleClass()你永遠只需要提供一個單一的處理函數：

$(function() { 
    $('.pop').hover(function() { 
    $(this).toggleClass('hover');    
    }); 
});

.pop { width: 280px; } 
.pop.hover { width: 300px; }

以一個階段再進一步，那麼你甚至不需要在所有使用JS代碼。您可以使用CSS的:hover選擇要修改的元素，當鼠標移動到它，就像這樣：

.pop { 
 
    width: 280px; 
 
    border: 1px solid #C00; 
 
    margin: 2px; 
 
} 
 
.pop:hover { width: 300px; }

<div class="pop">Pop</div> 
 
<div class="pop">Pop</div> 
 
<div class="pop">Pop</div>

來源

2017-03-31 12:59:30

嗯，好吧，我現在看到它的作品謝謝:)但爲什麼當我在我的身體標記結束時調用.js時它沒有工作？因爲DOM應該可用嗎？由於我最後調用了.js文件？ – user6086258

在這一點上它應該工作。我只能假設這個問題是由於你的拼寫錯誤 - 'fucntion'而不是'function'造成的。 –

即使將jquery包含在我的html中後，jquery仍然沒有運行

回答

相關問題