以更有效的方式使用 Javascript 更改 CSS 属性

Question

因此，我尝试使用 Javascipt 操作 CSS，以便当用户单击该框时，它会显示我在该特定月份拥有的数据。我已经设法实现了它，但是感觉代码太多了，并且可以有一种更有效的方法来实现我想要做的事情。

    <div class="calander-container">

        <div class="months">

            <p class="months-text">January</p>

        </div>

        <div class="months">

            <p class="months-text">February</p>

        </div>

        <div class="months">

            <p class="months-text">March</p>

        </div>

        <div class="months">

            <p class="months-text">April</p>

        </div>

        <div class="months">

            <p class="months-text">May</p>

        </div>

        <div class="months">

            <p class="months-text">June</p>

        </div>

        <div class="months">

            <p class="months-text">July</p>

        </div>

        <div class="months">

            <p class="months-text">August</p>

        </div>

        <div class="months">

            <p class="months-text">September</p>

        </div>

        <div class="months">

            <p class="months-text">October</p>

        </div>

        <div class="months">

            <p class="months-text">November</p>

        </div>

        <div class="months">

            <p class="months-text">December</p>

        </div>

    </div>

以上是用于用户单击框以运行脚本的 HTML。

document.querySelector('.calander-container').addEventListener('click', (e) => {

  const months = e.target.closest('.months');

  if (!months) {

    return;

  }

  const thisIndex = [...months.parentElement.children].indexOf(months);

  const rallyPrint = document.querySelectorAll('.rallyPrint');

  rallyPrint.forEach((div) => {

    div.style.display = 'none';

  });

  rallyPrint[thisIndex].style.display = 'block';

});

以上是我正在使用的有效的Javascript。但是，每个月执行此功能十二次似乎效率不高。我觉得好像有更简单的方法可以实现这一点。如果有任何帮助，下面是我正在使用的 PHP。

Answer 1

使用类而不是 ID，例如，而不是echo "<div id='rallyPrintJan'>";利用echo "<div class='rallyPrint'>";然后，当单击日历的容器时，遍历每个.rallyPrint类（使用事件委托而不是内联处理程序 - 内联处理程序是非常糟糕的做法，应尽可能避免使用）。检查被点击的元素是否有months祖先，如果有，确定months其父容器中的索引。rallyPrint从该索引中，您可以确定需要显示哪个元素：document.querySelector('.calander-container').addEventListener('click', (e) => {&nbsp; const months = e.target.closest('.months');&nbsp; if (!months) {&nbsp; &nbsp; return;&nbsp; }&nbsp; const thisIndex = [...months.parentElement.children].indexOf(months);&nbsp; const rallyPrint = document.querySelectorAll('.rallyPrint');&nbsp; rallyPrint.forEach((div) => {&nbsp; &nbsp; div.style.display = 'none';&nbsp; });&nbsp; rallyPrint[thisIndex].style.display = 'block';});现场演示：document.querySelector('.calander-container').addEventListener('click', (e) => {&nbsp; const months = e.target.closest('.months');&nbsp; if (!months) {&nbsp; &nbsp; return;&nbsp; }&nbsp; const thisIndex = [...months.parentElement.children].indexOf(months);&nbsp; const rallyPrint = document.querySelectorAll('.rallyPrint');&nbsp; rallyPrint.forEach((div) => {&nbsp; &nbsp; div.style.display = 'none';&nbsp; });&nbsp; rallyPrint[thisIndex].style.display = 'block';});<div class="calander-container">&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">January</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">February</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">March</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">April</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">May</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">June</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">July</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">August</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">September</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">October</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">November</p>&nbsp; </div>&nbsp; <div class="months">&nbsp; &nbsp; <p class="months-text">December</p>&nbsp; </div></div><div class='rallyPrint'>1</div><div class='rallyPrint'>2</div><div class='rallyPrint'>3</div><div class='rallyPrint'>4</div><div class='rallyPrint'>5</div><div class='rallyPrint'>6</div><div class='rallyPrint'>7</div><div class='rallyPrint'>8</div><div class='rallyPrint'>9</div><div class='rallyPrint'>10</div><div class='rallyPrint'>11</div><div class='rallyPrint'>12</div>

Answer 2

创建一个包含所有月份的数组，然后遍历每个月份并将函数参数与每个月份的名称进行比较。如果它们相同，则显示元素。否则，隐藏元素。function showMonth(monthName) {&nbsp; const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];&nbsp; months.forEach(month => {&nbsp; &nbsp; const el = document.getElementById("rallyPrint" + month);&nbsp; &nbsp; if (monthName === month) {&nbsp; &nbsp; &nbsp; el.style.display = "block"; // Show current month&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; el.style.display = "none"; // Not the current month, hide&nbsp; &nbsp; }&nbsp; });}showMonth("Jan") // Only shows January<div id="rallyPrintJan">Jan</div><div id="rallyPrintFeb">Feb</div><div id="rallyPrintMar">Mar</div><div id="rallyPrintApr">Apr</div><div id="rallyPrintMay">May</div><div id="rallyPrintJun">Jun</div><div id="rallyPrintJul">Jul</div><div id="rallyPrintAug">Aug</div><div id="rallyPrintSep">Sep</div><div id="rallyPrintOct">Oct</div><div id="rallyPrintNov">Nov</div><div id="rallyPrintDec">Dec</div>现在您可以将showMonth("Jan")函数传递给onclickPHP 中的属性。

Answer 3

这与@CertainPerformance 答案有关。<html><head><style>&nbsp; &nbsp; &nbsp; &nbsp; ul {list-style-type: none;}&nbsp; &nbsp; &nbsp; &nbsp; body {font-family: Verdana, sans-serif;}&nbsp; &nbsp; &nbsp; &nbsp; /* Month header */&nbsp; &nbsp; &nbsp; &nbsp; .month {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 70px 25px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #1abc9c;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Month list */&nbsp; &nbsp; &nbsp; &nbsp; .month ul {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .month ul li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; letter-spacing: 3px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Previous button inside month header */&nbsp; &nbsp; &nbsp; &nbsp; .month .prev {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Next button */&nbsp; &nbsp; &nbsp; &nbsp; .month .next {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: right;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding-top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Weekdays (Mon-Sun) */&nbsp; &nbsp; &nbsp; &nbsp; .weekdays {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:#ddd;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .weekdays li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 13.6%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #666;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Days (1-31) */&nbsp; &nbsp; &nbsp; &nbsp; .days {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 10px 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #eee;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .days li {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 13.6%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size:12px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #777;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; /* Highlight the "current" day */&nbsp; &nbsp; &nbsp; &nbsp; .days li .active {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #1abc9c;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white !important&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>&nbsp; &nbsp; &nbsp; <script&nbsp; type="text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $( document ).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('.calander-container').addEventListener('click', (e) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const months = e.target.closest('.months');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!months) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const thisIndex = [...months.parentElement.children].indexOf(months);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const rallyPrint = document.querySelectorAll('.rallyPrint');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rallyPrint.forEach((div) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.style.display = 'none';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rallyPrint[thisIndex].style.display = 'block';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; </script></head><body>&nbsp; &nbsp; <div class="calander-container">&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $month=array(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "1"=>"Jan",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "2"=>"Feb",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "3"=>"Mar",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "4"=>"April",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "5"=>"May",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "6"=>"June",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "7"=>"July",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "8"=>"Aug",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "9"=>"Sep",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "10"=>"Oct",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "11"=>"Nov",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "12"=>"Dec"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach($month as $k=>$v){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //echo "<br>Key :: ".$k."&nbsp; Val :: ".$v;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo '<div class="months">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p&nbsp; class="months-text">'.$v.'</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; foreach($month as $k=>$v){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<div class='rallyPrint'>$k</div>";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; </div></body>