javascript - 以更有效的方式使用 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。

if($row['month'] === 'January'){
            echo "<div class='rallyPrint'>";
            echo "<h2>" . $row['rallyVenue'] . " in " . $row['month'] . " " . $row['year'] . "</h2>";
            echo "<h4>Event: ". $row['rallyEvent'] . " </h4>";
            echo "<h3>Your Marshall(s): " . $row['rallyMarsh'] . "</h3>";
            echo "<h4>When? ". $row['rallyDate'] . " </h4>";
            echo "<p>" . $row['rallyDesc'] . "</p>";
            echo "<p>How much? ". $row['rallyCost'] . " </p>";
            echo "<p>How long? ". $row['rallyNights'] . " Nights</p>";
            echo "<p>Pitch Limit? ". $row['pitchLimit'] . "</p>";
            echo "<p>Phone Number: 0". $row['phoneNo'] . " </p>";
            echo "<p>Email: <a href='mailto:". $row['email'] . "'> ". $row['email'] ."</a></p>";
            echo "<p>Please make sure you to contact ". $row['rallyMarsh'] . " for more information.</p>";
            if(isset($_SESSION['loggedin'])){
                echo "<a href='' id='". $row['rallyId'] . "' class='trash'>Delete</a>";
            }
            echo "</div><br>";
        }

Answer 1

使用类代替ID，例如代替

echo "<div id='rallyPrintJan'>";

使用

echo "<div class='rallyPrint'>";

然后，当日历的容器被点击时，迭代每个 .rallyPrint 类(使用事件委托(delegate)而不是内联处理程序——内联处理程序是非常糟糕的做法，应该尽可能避免).检查单击的元素是否有 months 祖先，如果有，则在其父容器中标识 months 的索引。从该索引中，您可以找出需要显示的 rallyPrint 元素:

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';
});

现场演示:

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';
});

<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>



<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>