Список книг

03.06.2021, 20:59. Показов 1467. Ответов 0

Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам

Здравствуйте
Есть такая задача:
Создать html-страницу со списком книг. При щелчке на элемент, цвет текста должен меняться на оранжевый. При повторном щелчке на другую, предыдущей необходимо возвращать прежний цвет.
Если при клике мышкой была зажата клавиша Ctrl, то элемент добавляется/удаляется из выделенных. Если при клике мышкой была зажата клавиша Shift, то к выделению добавляются все элементы в промежутке от предыдущего кликнутого до текущего

Вот код к первой половине задачи

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    .List li {
      cursor: pointer;
    }
    .selected {
      background-color: orange;
    }
  </style>
  </head>
  <body>
    <ol class="List">
      <li>"JavaScript for Kids: A Playful Introduction to Programming" by Nick Morgan</li>
      <li>"Eloquent JavaScript: A Modern Introduction to Programming" by Marijn Haverbeke</li>
      <li>"JavaScript: The Good Parts" by Douglas Crockford</li>
      <li>"Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Moderns JS Libraries" by Eric Elliott</li>
      <li>"Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript" by David Herman</li>
      <li>"JavaScript: The Definitive Guide" by David Flanagan</li>
      <li>"You Don’t Know JS" by Kyle Simpson</li>
    </ol>
 
    <script>
    'use strict'
    let list = document.querySelectorAll('.List li');
 
    function setSelected() {
         document.querySelectorAll('.List li.selected').forEach(
         function (li) {
          li.classList.remove('selected');
        }
      )
        this.classList.add('selected');
      }
 
      list.forEach(
        function(li) {
           li.onclick = setSelected;
       }
     )
     </script>
  </body>
</html>

Но возникла проблема с Shift и Ctrl.
Буду благодарна за помощь

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

Блог

03.06.2021, 20:59

Ответы с готовыми решениями:

Составить список книг, отсортировать список книг по жанрам и популярности (по убыванию)
№2 - Составить список книг. Для каждой книги указать: название, автора, год издания, издательство, жанр, оценку популярности. отсортировать...

Сформировать по запросу список книг,не превышающих среднее число страниц, найти книгу с наименьшим количеством страниц, отсортировать список книг
Фамилия автора, название книги, издательство, год издания, количество страниц.Сформировать по запросу список книг,не превышающих среднее...

Сформировать список из 10 книг, используя динамическую структуру данных односвязный список
друзья спасайте Сформировать список из 10 книг, используя динамическую структуру данных односвязный список С++

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

Блог

03.06.2021, 20:59

Помогаю со студенческими работами здесь

Дан список, состоящий из названия книг. Напечатать список, упорядоченный по фамилии автора
Дан список, состоящий из названия книг, фамилии авторов, названия издания и года издания. Напечатать список, упорядоченный по фамилии...

Из всех сведений создать список книг одного автора. Вывести полученный список на экран
Помогите решить, пожалуйста!!!!! Условие задачи. Данные о фондах библиотеки занести в файл в формате: автор книги, название книги,...

Список книг
Помогите написать отчет выводящий список романов, фентази, фантастика и ужасы и подсчитать для каждой категории среднее число страниц. ...

Список книг
База данных содержит факты вида: книга(автор, название, издательство, год_издания), украина(город). а) вывести весь список книг; б)...

Массив структур: определить общее число книг в библиотеке, наличие книг по автору, наличие книг по названию
Дана такая задача. Для каждой книги в библиотеке хранится следующая информация: автор, название, имеющееся количество в библиотеке....

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

Наверх