Создадим простой блог, цвет которого меняется в зависимости от выбора пользователя.
Создание блока и стилей
Создаём блок <div> с текстом:
<div id="myDiv">Текст</div>
Добавим стили для классов div1 (красный) и div2 (зелёный):
.div1 {
color: red;
}
.div2 {
color: green;
}
Получение и проверка ввода
Функция запрашивает у пользователя число (1 или 2) и проверяет корректность ввода:
function front() {
let div = prompt("Введите число 1 или 2");
while (div != 1 && div != 2) {
alert("Пожалуйста, введите число 1 или 2");
div = prompt("Введите число 1 или 2");
}
//Дальнейшая обработка ввода
}
Примечание: для более эффективной проверки рекомендуется использовать оператор || вместо &&.
Добавление и удаление классов с помощью jQuery
После корректного ввода, изменяем класс <div> с помощью jQuery. Находим элемент по ID:
$("#myDiv")
Используем метод addClass() для добавления класса в зависимости от ввода:
$("#myDiv").addClass("div" + div);
div — переменная, содержащая введённое число (1 или 2). Добавляется класс div1 или div2.
Вывод результата
Выведем alert с выбранным классом:
alert($("#myDiv").attr("class"));
Для получения класса элемента через jQuery используется метод attr("class").
Полный код
<div id="myDiv">Текст</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function front() {
let div = prompt("Введите число 1 или 2");
while (div != 1 && div != 2) {
alert("Пожалуйста, введите число 1 или 2");
div = prompt("Введите число 1 или 2");
}
$("#myDiv").addClass("div" + div);
alert($("#myDiv").attr("class"));
}
front();
</script>
<style>
.div1 {
color: red;
}
.div2 {
color: green;
}
</style>
Класс добавляется динамически с помощью JavaScript и jQuery.
Мы научились манипулировать классами элементов HTML с помощью jQuery, используя методы addClass() и attr(), и важность проверки ввода пользователя. Это позволяет динамически изменять внешний вид страницы.