Невозможно загрузить коды jQuery

Я являюсь абсолютным новичком в веб-разработке. У меня есть 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

Если файл jqery находится в том же foolder вашей HTML страницы Попробуйте uisng ./ (точка /) для относительного пути <сценарий SRC = "./ Jquery-3.1.0.min.js"> – scaisEdge

Откройте консоль разработчика. Вы видите ошибки в консоли? Где находится код JavaScript? Я не вижу, где находится JS-файл в этом html-документе. – epascarello

пишет: ** jQuery.Deferred exception: $ (...). Clicked не является функцией 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_clicked к .button в отличие от изменения имени класса для уменьшения суммы необходимого CSS. В этом случае вы можете удалить все, кроме цвета фона, в классе button_clicked. – Josh

Вам не нужна именованная функция - назначить поведение события клики непосредственно на нажатие кнопки:

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

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

источник

2016-07-21 21:07:37 gavgrif

Невозможно загрузить коды jQuery

ответ

Смежные вопросы