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

因此，我尝试使用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>

上面是我正在使用的Javascript，它可以工作。然而，每个月做12次这个功能似乎并不有效。我觉得似乎有更简单的方法来实现这一点。 下面是我正在使用的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>";
        }

if（$row['month']='January'）{
回声“；
回显“$row['rallyVenue']”中的“$row['MOUNT']”和“$row['year']”中的“$row['rallyVenue']”；
回显“事件：.$row['rallyEvent']。”；
回应“你的马歇尔：”$row['rallyMarsh']。”；
回显“何时？”。$row['rallyDate']。”；
回声“”$row['rallyDesc']。“
”；
回声“多少？”.$row['rallyCost']。”
”；
回声“多长时间？”.$row['rallyNights']。“夜晚”
”；
回声“音高限制？”.$row['pitchLimit']。“
”；
echo“电话号码：0”。$row['phoneNo']”“
”；
回显“电子邮件：
”；
echo“请确保联系“$row['rallyMarsh']”了解更多信息。
”；
如果（isset（$_会话['loggedin']））{
回声“；
}
回声“
”；
}

使用类代替ID，例如代替

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

现场演示：

document.querySelector（'.calander容器'）.addEventListener（'click'，（e）=>{
常量月数=e.target.Closed（'.months'）；
如果（！个月）{
返回；
}
constThisIndex=[…months.parentElement.children].indexOf（months）；
const rallyPrint=document.querySelectorAll（'.rallyPrint'）；
rallyPrint.forEach（（div）=>{
div.style.display='none'；
});
rallyPrint[thisIndex].style.display='block'；
});

一月

二月

三月

四月

五月
6月
七月

8月
九月

10月
11月
十二月

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
使用类而不是ID，例如代替

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

现场演示：


document.querySelector（'.calander容器'）.addEventListener（'click'，（e）=>{
常量月数=e.target.Closed（'.months'）；
如果（！个月）{
返回；
}
constThisIndex=[…months.parentElement.children].indexOf（months）；
const rallyPrint=document.querySelectorAll（'.rallyPrint'）；
rallyPrint.forEach（（div）=>{
div.style.display='none'；
});
rallyPrint[thisIndex].style.display='block'；
});

一月

二月

三月

四月

五月
6月
七月

8月
九月

10月
11月
十二月

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
创建一个包含所有月份的数组，然后循环遍历每个月份，并将函数参数与每个月份名称进行比较。如果它们相同，则显示元素。否则，隐藏该元素


功能显示月（月名）{
施工月数=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
月份。forEach（月份=>{
const el=document.getElementById（“rallyPrint”+月份）；
如果（月名===月）{
el.style.display=“block”//显示当前月份
}否则{
el.style.display=“无”//不是当前月份，隐藏
}
});
}
showMonth（“一月”）//仅显示一月
Jan
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
Dec
创建一个包含所有月份的数组，然后循环遍历每个月份，并将函数参数与每个月份名称进行比较。如果它们相同，则显示元素。否则，隐藏该元素


功能显示月（月名）{
施工月数=[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]；
月份。forEach（月份=>{
const el=document.getElementById（“rallyPrint”+月份）；
如果（月名===月）{
el.style.display=“block”//显示当前月份
}否则{
el.style.display=“无”//不是当前月份，隐藏
}
});
}
showMonth（“一月”）//仅显示一月
Jan
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
Dec
您可以像使用JQuery一样尝试如下


$（“div[id^='rallyPrint']）.hide（）；
$（“div[id='rallyPrintJan']）show（）

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
Dec
您可以像使用JQuery一样尝试如下


$（“div[id^='rallyPrint']）.hide（）；
$（“div[id='rallyPrintJan']）show（）

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月
这与@CertainPerformance answer有关

<html>
<head>
<style>
        ul {list-style-type: none;}
        body {font-family: Verdana, sans-serif;}

        /* Month header */
        .month {
          padding: 70px 25px;
          width: 100%;
          background: #1abc9c;
          text-align: center;
        }

        /* Month list */
        .month ul {
          margin: 0;
          padding: 0;
        }

        .month ul li {
          color: white;
          font-size: 20px;
          text-transform: uppercase;
          letter-spacing: 3px;
        }

        /* Previous button inside month header */
        .month .prev {
          float: left;
          padding-top: 10px;
        }

        /* Next button */
        .month .next {
          float: right;
          padding-top: 10px;
        }

        /* Weekdays (Mon-Sun) */
        .weekdays {
          margin: 0;
          padding: 10px 0;
          background-color:#ddd;
        }

        .weekdays li {
          display: inline-block;
          width: 13.6%;
          color: #666;
          text-align: center;
        }

        /* Days (1-31) */
        .days {
          padding: 10px 0;
          background: #eee;
          margin: 0;
        }

        .days li {
          list-style-type: none;
          display: inline-block;
          width: 13.6%;
          text-align: center;
          margin-bottom: 5px;
          font-size:12px;
          color: #777;
        }

        /* Highlight the "current" day */
        .days li .active {
          padding: 5px;
          background: #1abc9c;
          color: white !important
        }
        </style>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script  type="text/javascript">          
        $( document ).ready(function() {
            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';
            });
        });
        </script>

</head>
<body>
    <div class="calander-container">
        <?php
            $month=array(
                            "1"=>"Jan",
                            "2"=>"Feb",
                            "3"=>"Mar",
                            "4"=>"April",
                            "5"=>"May",
                            "6"=>"June",
                            "7"=>"July",
                            "8"=>"Aug",
                            "9"=>"Sep",
                            "10"=>"Oct",
                            "11"=>"Nov",
                            "12"=>"Dec"
                        );
            foreach($month as $k=>$v){
                //echo "<br>Key :: ".$k."  Val :: ".$v;
                echo '<div class="months">
                        <p  class="months-text">'.$v.'</p>
                      </div>';
            }
        ?>



        <?php
        foreach($month as $k=>$v){
            echo "<div class='rallyPrint'>$k</div>";                
        }


        ?>
    </div>
</body>


ul{列表样式类型：无；}
正文{字体系列：Verdana，无衬线；}
/*月头*/
.月{
填充：70px 25px；
宽度：100%；
背景：#1abc9c；
文本对齐：居中；
}
/*月表*/
月保险费{
保证金：0；
填充：0；
}
李先生{
颜色：白色；
字体大小：
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';
});

<html>
<head>
<style>
        ul {list-style-type: none;}
        body {font-family: Verdana, sans-serif;}

        /* Month header */
        .month {
          padding: 70px 25px;
          width: 100%;
          background: #1abc9c;
          text-align: center;
        }

        /* Month list */
        .month ul {
          margin: 0;
          padding: 0;
        }

        .month ul li {
          color: white;
          font-size: 20px;
          text-transform: uppercase;
          letter-spacing: 3px;
        }

        /* Previous button inside month header */
        .month .prev {
          float: left;
          padding-top: 10px;
        }

        /* Next button */
        .month .next {
          float: right;
          padding-top: 10px;
        }

        /* Weekdays (Mon-Sun) */
        .weekdays {
          margin: 0;
          padding: 10px 0;
          background-color:#ddd;
        }

        .weekdays li {
          display: inline-block;
          width: 13.6%;
          color: #666;
          text-align: center;
        }

        /* Days (1-31) */
        .days {
          padding: 10px 0;
          background: #eee;
          margin: 0;
        }

        .days li {
          list-style-type: none;
          display: inline-block;
          width: 13.6%;
          text-align: center;
          margin-bottom: 5px;
          font-size:12px;
          color: #777;
        }

        /* Highlight the "current" day */
        .days li .active {
          padding: 5px;
          background: #1abc9c;
          color: white !important
        }
        </style>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script  type="text/javascript">          
        $( document ).ready(function() {
            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';
            });
        });
        </script>

</head>
<body>
    <div class="calander-container">
        <?php
            $month=array(
                            "1"=>"Jan",
                            "2"=>"Feb",
                            "3"=>"Mar",
                            "4"=>"April",
                            "5"=>"May",
                            "6"=>"June",
                            "7"=>"July",
                            "8"=>"Aug",
                            "9"=>"Sep",
                            "10"=>"Oct",
                            "11"=>"Nov",
                            "12"=>"Dec"
                        );
            foreach($month as $k=>$v){
                //echo "<br>Key :: ".$k."  Val :: ".$v;
                echo '<div class="months">
                        <p  class="months-text">'.$v.'</p>
                      </div>';
            }
        ?>



        <?php
        foreach($month as $k=>$v){
            echo "<div class='rallyPrint'>$k</div>";                
        }


        ?>
    </div>
</body>