jQuery: Меняем цвет блока по выбору пользователя

Создадим простой блог, цвет которого меняется в зависимости от выбора пользователя.

Создание блока и стилей

Создаём блок <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(), и важность проверки ввода пользователя. Это позволяет динамически изменять внешний вид страницы.

Что будем искать? Например,программа