循环函数document.getElementById()

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了循环函数document.getElementById()相关的知识,希望对你有一定的参考价值。

所以我使用了三个唯一的ID“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>
答案

这些元素已经有classtitle,所以你可以循环遍历所有.title元素并附加监听器:

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

(随意删除所有ids和内联属性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');
});

以上是关于循环函数document.getElementById()的主要内容,如果未能解决你的问题,请参考以下文章

Cors 请求阻止的 Firebase 函数

前端速成-JavaScript | 09.JavaScript DOM

在C#后面调用Javascript函数[重复]

使用书签快速登陆系统

如何同步范围类型

使用输入值创建跨度