jqueryはhtmlに含めても実行していません

jsceryをscript.jsとして保存したjsフォルダに入れて、自分のhtmlでファイルを呼び出しようとしています。だから私は私のCSSの前に、私のCSSの後にそれを呼び出そうとしました。誰でも自分の問題を特定できますか？ DOMが使用可能であるとき、ここに私がjqueryはhtmlに含めても実行していません

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

そして、ここに私のindex.phpに私のscript.jsを呼び出そうとしましたどのように私のjqueryのコードは

ある

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

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

});

出典

2017-03-31 user6086258

をこの '$（ドキュメント）.ready（関数（）{の内側には、コードラップしてみてください}） ' –

ブラウザのコンソールにはどんなエラーがありますか？ – j08691

だあなたは、あなたのJSコードを実行する必要があります。現在、.pop要素が存在する前にそれらを使用しようとしています。

にjQueryでこれを行うには、あなたがdocument.readyイベントハンドラを使用することができます

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

しかし、あなたのコードの品質を向上させることができ、ここで注意すべき物事のカップルがありますが。まずJSコードにCSSルールを入れないでください。代わりにクラスを作成し、必要に応じて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

ええええええええと、それは今感謝:)私はbodyタグの最後に.jsを呼び出すと動作しませんでしたか？ DOMは利用可能なはずですか？私は最後に.jsファイルを呼び出したので、？ – user6086258

その時点でうまくいくはずです。私はあなたの誤植のために 'function'ではなく' fucntion'が原因であると仮定しています。 –

jqueryはhtmlに含めても実行していません

答えて

関連する問題