Javascript 单击一个月时，它只打印数据库中的一行，而不是链接到该月的所有行

所以我的网页上有一个日历。单击某个月时，它应打印链接到该月的所有数据。然而，对于我现有的代码，它不能做到这一点。例如，如果我点击一月，它将从数据库中打印第一个一月。但是，当我单击“二月”时，它应该打印二月的数据，但它会打印链接到一月的第二条数据。我希望它在我单击一月时打印一月的所有数据，在我单击二月时，它应该打印二月的所有数据，等等

以下是我的HTML：

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

---

逻辑上有一些缺陷…PHP返回几个带有class.rallyPrint的div，然后将它们全部设置为“none”，只将其中一个设置为“block”

设置为阻止从months数组中获取的索引，但将其应用于rallyPrint元素，Gut知道原因

可能您应该将表示月份的类添加到您的.rallyPrint DIV中，并且显示或隐藏取决于此类

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
            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>";


    }
} else {
    echo "<h2 align='center'>Rallies Currently Not Available!</h2>";
    }

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