Как использовать Javascript для добавления звезд в отзывы

В этом уроке я покажу вам, как легко добавить звезды отзывов с помощью Javascript в ваше веб-приложение и сделать их динамически функциональными. Имейте в виду, что у меня был определенный код в веб-приложении, на которое я ссылаюсь. Возможно, вам придется изменить его в соответствии с вашими целями.

Первым шагом будет добавление ссылки Font Awesome на вашу HTML-страницу.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Вход в полноэкранный режим Выход из полноэкранного режима

Вот полный HTML-файл с заголовком и ссылкой в нем.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Fish Store</title>
    <style>
        body {
            padding: 25px;
        }
    </style>
</head>
Вход в полноэкранный режим Выход из полноэкранного режима

Далее необходимо создать код Javascript. В данном примере мы используем 5-звездочный отзыв. Обратите внимание, что в моем коде есть функция createDiv(). Это просто создание элемента Div с назначенным идентификатором для структуры веб-приложения. Для этого примера моими идентификаторами звезд будут newreviewstars11, newreviewstar21, newreviewstar31, newreviewstar41 и newreviewstar51. Эти звезды будут начинаться с className «fa fa-star». Имя класса «fafa-star» при первоначальной генерации не будет выделено.

//create the div star element
newDiv = createDiv("newreviewstars", reviewId)
    form.appendChild(newDiv)

// for loop to generate the number of stars, in this instance 5.
    for (let k = 1; k < 6; k++){
      let starDiv = createDiv('fa fa-star', k)
      starDiv.setAttribute("id", `newreviewstar${k}${reviewId}`)
      element = newDiv.appendChild(starDiv)
    }
Войти в полноэкранный режим Выход из полноэкранного режима

Чтобы звезда заполнилась цветом, имя класса div нужно изменить на «fa fa-star checked» и добавить ссылку «.checked» в CSS-файл.

Вот пример того, как изменить имя класса. Вам придется сгенерировать JS-код для изменения className в зависимости от требуемой функциональности.

starDiv.className = 'fa fa-star checked'
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот что нужно сделать в CSS-файле, чтобы залить звезды оранжевым цветом, когда они «отмечены».

.checked {
  color: orange;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Чтобы сделать звезды динамичными, необходимо добавить слушателя к каждому элементу звезды.

// creates a listener for selecting the number of stars when creating a new review
  function reviewStarsListener(newReviewId){
    //obtain stars element, which is displayed as an array
    for (let i = 1; i <= 5; i++){
      let star = document.getElementById(`newreviewstar${i}${newReviewId}`)
      star.addEventListener("click", function(){highlightStar(star, newReviewId)});
    }
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Есть несколько моментов, которые необходимо учитывать в отношении функциональности:

  1. Если пользователь нажимает на звезду 4, то мы ожидаем, что звезды с 1 по 3 также будут отмечены.
  2. Если пользователь случайно выбирает 5 звезд, а имел в виду 4 звезды, то ему нужен способ, чтобы он мог нажать на другую звезду, и она автоматически подстроится.

Мой слушатель выполняет функцию highlightStar(), которая сначала выполняет функцию clearStars(), а затем подсвечивает звезды, таким образом, их можно динамически изменять.

// highlights additional stars when a high star value is selected.
// e.g. if star 4 is selected then this will highlight star 1 - 4.
  function highlightStar(starDiv, newReviewId){
    clearStars(newReviewId)
    starSelected = starDiv.id.replace("newreviewstar", "")
    numOfStars = starSelected.charAt(0)
    for (let i = 1; i <= numOfStars; i++){
      let starDiv = document.getElementById(`newreviewstar${i}${newReviewId}`)
      starDiv.className = 'fa fa-star checked'
    }
  }
Вход в полноэкранный режим Выход из полноэкранного режима
// allow reviewer to dynamically be able to click on the stars to
  // change their # of stars review
  function clearStars(newReviewId){
    for (let i = 1; i <= 5; i++){
      let starDiv = document.getElementById(`newreviewstar${i}${newReviewId}`)
      starDiv.className = 'fa fa-star'
    }
  }
Вход в полноэкранный режим Выход из полноэкранного режима

Надеюсь, это поможет дать некоторые рекомендации при создании ваших динамических веб-приложений с обзорами!

Оцените статью
devanswers.ru
Добавить комментарий