第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

因此，我嘗試使用 Javascipt 操作 CSS，以便當(dāng)用戶(hù)單擊該框時(shí)，它會(huì)顯示我在該特定月份擁有的數(shù)據(jù)。我已經(jīng)設(shè)法實(shí)現(xiàn)了它，但是感覺(jué)代碼太多了，并且可以有一種更有效的方法來(lái)實(shí)現(xiàn)我想要做的事情。    <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>以上是用于用戶(hù)單擊框以運(yùn)行腳本的 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。但是，每個(gè)月執(zhí)行此功能十二次似乎效率不高。我覺(jué)得好像有更簡(jiǎn)單的方法可以實(shí)現(xiàn)這一點(diǎn)。如果有任何幫助，下面是我正在使用的 PHP。
查看完整描述

3 回答

?
jeck貓

TA貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

使用類(lèi)而不是 ID，例如，而不是


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

利用


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

然后，當(dāng)單擊日歷的容器時(shí)，遍歷每個(gè).rallyPrint類(lèi)（使用事件委托而不是內(nèi)聯(lián)處理程序 - 內(nèi)聯(lián)處理程序是非常糟糕的做法，應(yīng)盡可能避免使用）。檢查被點(diǎn)擊的元素是否有months祖先，如果有，確定months其父容器中的索引。rallyPrint從該索引中，您可以確定需要顯示哪個(gè)元素：


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

});

現(xiàn)場(chǎng)演示：

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>


查看完整回答
反對(duì) 回復(fù) 2022-01-13
?
慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊

創(chuàng)建一個(gè)包含所有月份的數(shù)組，然后遍歷每個(gè)月份并將函數(shù)參數(shù)與每個(gè)月份的名稱(chēng)進(jìn)行比較。如果它們相同，則顯示元素。否則，隱藏元素。


function showMonth(monthName) {

  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];


  months.forEach(month => {

    const el = document.getElementById("rallyPrint" + month);


    if (monthName === month) {

      el.style.display = "block"; // Show current month

    } else {

      el.style.display = "none"; // Not the current month, hide

    }

  });

}


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>


現(xiàn)在您可以將showMonth("Jan")函數(shù)傳遞給onclickPHP 中的屬性。


查看完整回答
反對(duì) 回復(fù) 2022-01-13
?
HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊

這與@CertainPerformance 答案有關(guān)。


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



查看完整回答
反對(duì) 回復(fù) 2022-01-13
  • 3 回答
  • 0 關(guān)注
  • 159 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)