jQueryコードを読み込めません

私はWeb開発の初心者です。私は、HTML、CSSとJavaScriptファイルがあります。ボタンの背景色を変更するだけですが、残念ながらそれは機能しません。すべてのファイル（jqueryライブラリを含む）はフォルダに置かれます。どんな手がかりもありがとう。jQueryコードを読み込めません

htmlファイル：

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="jquery-3.1.0.min.js"></script> 
    <script src="code.js"></script> 
    </head> 
    <body> 
    <button class="button">Click!</button> 
    </body> 
</html>

CSSファイル：

.button { 
    background-color: #4CAF50; 
    border: none; 
    color: white; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    margin: 4px 2px; 
    cursor: pointer; 
} 

.button_clicked { 
    background-color: #ff0000; 
}

javascriptのコード：

var clicked = function(){ 
    $('.button').clicked(function(){ 
     $(this).toggleClass("button_clicked"); 
    }); 
}; 

$(document).ready(clicked);

出典

2016-07-21 ehsan toghian

./相対パス（ドット/）<スクリプトSRC = "./ jqueryの-3.1.0.min.js"> – scaisEdge

デベロッパーコンソールを開きます。コンソールにエラーが表示されますか？ JavaScriptコードはどこにありますか？ JSファイルがどこにあるのかわかりません。 – epascarello

それは以下のように書いています：** jQuery.Deferred exception：$（...）。clickedは@ file：/// C：/Users/Ehsan/Desktop/New%20folder/code.js：2：2をクリックした関数ではありません。 g/

それは単純なタイプミスです。変数名はclickedと定義されていますが、jQueryの関数はclick()です。あなたは、以下の変更を行うのであればそれだけで正常に動作する必要があります：

var clicked = function(){ 
$('.button').click(function(){ 
    $(this).toggleClass("button_clicked"); 
}); 
}; 

$(document).ready(clicked);

出典

2016-07-21 20:50:33 ahajib

をこのコードを試してみてください。

function change_color() 
 
{ 
 
    var NAME = document.getElementById("button"); 
 
    var currentClass = NAME.className; 
 
    if (currentClass == "button") { // Check the current class name 
 
     NAME.className = "button_clicked"; // Set other class name 
 
    } else { 
 
     NAME.className = "button"; // Otherwise, use `second_name` 
 
    } 
 
}

.button ,.button_clicked { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
.button_clicked { 
 
    background-color: #ff0000; 
 
}

<html> 
 
<head> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<script src="jquery-3.1.0.min.js"></script> 
 
<script src="code.js"></script> 
 
</head> 
 

 
<body> 
 
<button class="button" id="button" onclick="change_color()">Click!</button> 
 
</body> 
 
</html>

出典

2016-07-21 21:06:55 Vaibhav

このコードは機能しますが、機能とマークアップを分離しておくために、JavascriptをHTMLから完全に削除する必要があります。メンテナンスが簡単になり、シンジケーションの潜在的な問題を防ぐことができます（適用可能な場合）また、ここで書いたCSSとJavaScriptを変更することをお勧めします。ボタンの名前を変更する代わりに.buttonにbutton_clickedクラスを追加してください必要なCSSのその場合は、button_clickedクラスの背景色を除くすべてを削除できます。 – Josh

あなたが名前の関数を必要としない - クリックイベントの動作を割り当てます

$(document).ready(function(){ 
 
    $('.button').click(function(){ 
 
    $(this).toggleClass("button_clicked"); 
 
    }); 
 
    });

.button { 
 
    background-color: #4CAF50; 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    margin: 4px 2px; 
 
    cursor: pointer; 
 
} 
 

 
.button_clicked { 
 
    background-color: #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="button">Click Me</button>

01 jqeryファイルはHTMLページの同じfoolderにある場合uisngを試してみてください

出典

2016-07-21 21:07:37 gavgrif

jQueryコードを読み込めません

答えて

関連する問題