Функция цикла document.getElementById()

Итак, я использую три уникальных идентификатора: «titleselected0», «titleselected1», «titleselected2». Каждый с функцией onclick, которая запускает функцию «myFunction0», «myFunction1», «myFunction2». Я использую это, чтобы изменить стиль. Мой вопрос в том, могу ли я использовать цикл, поэтому мне нужно использовать только одну функцию вместо трех?

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <style type = "text/css">.collapse {
           display: none;
           }
           .collapse.in {
           display: block;
           }
           .title {
           background-color: #005FAA;
           border: none;
           border-radius: 0;
           padding: 30px;
           }
           .title:hover {
           background-color: #009cde;
           border: none;
           border-radius: 0;
           padding: 30px;
           }
           .container{
           margin-top:25px;
           float:left; 
           width: 32%; 
           margin-right: 2%;
           }
           .container:last-child{
           margin-right:0px;
           width:32%;}
           @media only screen and (max-width: 800px) {
           .container{
           margin-top:15px;
           width: 100%;
           }
           .container:last-child{
           margin-top:15px;
           width: 100%;
           }
           }
           .titleselected{
           background-color: #009cde;
           border:none; 
           border-radius:0; 
           padding: 30px;
           }
        </style>
        <div>
           <div class = "container">
              <div class = "title" data-toggle = "collapse" href = "#collapse" id = "titleselected0" onclick = "myFunction0()">
                 <h4><a href = "#collapse" style = "color:white; text-decoration:none; text-align:center;">System Information</a></h4>
              </div>
              <div class = "collapse" id = "collapse" style = "background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
                 <div style = "color:white; padding: 30px;border:none;">
                    <p><strong>TestingTestingTestingTestingTestingTestingTesting</strong></p>
                    <ul>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                    </ul>
                    <p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
                    <ul>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                    </ul>
                 </div>
              </div>
           </div>
           <div class = "container">
              <div class = "title" data-toggle = "collapse" href = "#collapse2" id = "titleselected1" onclick = "myFunction1()">
                 <h4><a href = "#collapse2" style = "color:white;text-decoration:none;text-align:center;">Product Specification</a></h4>
              </div>
              <div class = "collapse" id = "collapse2" style = "background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
                 <div style = "color:white; padding: 30px;border:none;">
                    <p><strong>TestingTestingTestingTestingTestingTestingTesting:</strong></p>
                    <ul>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                    </ul>
                 </div>
              </div>
           </div>
           <div class = "container">
              <div class = "title" data-toggle = "collapse" href = "#collapse3" id = "titleselected2" onclick = "myFunction2()">
                 <h4><a href = "#collapse3" style = "color:white;text-decoration:none;text-align:center;">Case Study</a></h4>
              </div>
              <div class = "collapse" id = "collapse3" style = "background-color:#005FAA;transition: width 200ms ease-out, height 200ms ease-out;">
                 <div style = "color:white; padding: 30px;border:none;">
                    <p><strong>TestingTestingTestingTestingTestingTestingTesting: </strong></p>
                    <ul>
                       <li>TestingTestingTestingTestingTestingTestingTesting</li>
                       <li>TestingTestingTestingTestingTestingTestingTesting <a href = "http://portfolio.cpl.co.uk/CIBSE/201904/40/">appeared in the CIBSE Journal</a></li>
                    </ul>
                 </div>
              </div>
           </div>
        </div>
        <script>
           function myFunction0() {
              var element = document.getElementById("titleselected0");
              element.classList.toggle("titleselected");
           }
           
           function myFunction1() {
              var element = document.getElementById("titleselected1");
              element.classList.toggle("titleselected");
           }
           
           function myFunction2() {
              var element = document.getElementById("titleselected2");
              element.classList.toggle("titleselected");
           }
           
           
        </script>

javascript html loops onclick getelementbyid

06.04.2019 11:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У этих элементов уже есть class из title, поэтому вы можете просто перебрать все .title элементы и присоединить слушатель:

document.querySelectorAll('.title').forEach((element) => {
  element.addEventListener('click', () => {
    element.classList.toggle("titleselected");
  });
});

(не стесняйтесь удалять все их обработчики id и встроенных атрибутов onclick — лучше всего прикреплять слушателей с помощью Javascript, а не HTML)

Вы также можете использовать делегирование событий для контейнера, в котором есть все .titles:

<div class = "container-for-all">
   <div class = "container">
     ...
   </div>
   <div class = "container">
     ...
   </div>
   <!-- etc -->

а также

document.querySelector('.container-for-all').addEventListener('click', ({ target }) => {
  const closestTitle = target.closest('.title');
  if (!closestTitle) {
    return;
  }
  closestTitle.classList.toggle('titleselected');
});

06.04.2019 11:17

Другие вопросы по теме

Невозможно центрировать div внутри контейнера с помощью начальной загрузки

Принудительное обновление JavaScript для Friconix

Остановка отправки формы при обновлении страницы

Удаление "?" только в определенном подкаталоге с помощью str_replace

Есть ли способ распечатать флажки в Advanced PDF? (я имею в виду сами флажки, а не их значение)

Как исправить проблему прозрачности содержимого с возможностью прокрутки в фиксированном положении нижнего и верхнего div

Элементы сетки имеют разную высоту

Как поместить ссылки и текст поверх элементов сетки в сетке фотографий

Невозможно поместить текст в центр круглых кнопок

Невозможно свернуть несколько элементов

Функция цикла document.getElementById()

Ответы 1

Другие вопросы по теме

Похожие вопросы