Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
javascript – JS JQ-Dateninitialisierungsproblem
过去多啦不再A梦
过去多啦不再A梦 2017-07-05 10:49:08
0
2
799

So gleichen Sie die Temperaturdaten des oberen gelben Bereichs und des unteren weißen Bereichs nach dem Laden der Seite aus

Der gelbe Teil wird mit HTML in den Tag geschrieben

Der weiße Teil wird von JS gesteuert und kann erhöht oder verringert werden, aber die Daten können nach dem Erhöhen oder Verringern konsistent gehalten werden

Aber es gibt keine Möglichkeit sicherzustellen, dass die Daten konsistent sind, wenn die Seite zum ersten Mal geladen wird

Bitte geben Sie mir einen Rat
Der Code für den gelben Bereich in der oberen Hälfte

  <p class="device-control">
                <ul>
                    <li> <span class="leng">3</span><i>℃</i>

                        <p>冷藏区</p>
                    </li>
                    <li class="line"></li>
                    <li> <span class="bian">5</span><i>℃</i>

                        <p>变温区</p>
                    </li>
                    <li class="line"></li>
                    <li> <span class="dong">-18</span><i>℃</i>

                        <p>冷冻区</p>
                    </li>
                </ul>
            </p>

Der weiße Bereich in der unteren Hälfte

  <li onclick="changeTemper($(this),1)">
                <p class="control-icon"><img
                        src="images/refrigeratorControl/collectionOffImages/virtual-collection-normal1@3x.png"/></p>

                <p>冷藏区 <span>3</span>℃</p>
            </li>
            <li onclick="changeTemper($(this),2)">
                <p class="control-icon"><img
                        src="images/refrigeratorControl/collectionOffImages/virtual-collection-normal2@3x.png"/></p>

                <p>变温区 <span>-5</span>℃</p>
            </li>
            <li onclick="changeTemper($(this),3)">
                <p class="control-icon"><img
                        src="images/refrigeratorControl/collectionOffImages/virtual-collection-normal3@3x.png"/></p>

                <p>冷冻区 <span>-22</span>℃</p>
            </li>
过去多啦不再A梦
过去多啦不再A梦

Antworte allen(2)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-05 10:51:08 2 Etage

页面加载的时候填充相同的数据即可。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        $(document).ready(function(){
            $(".leng").html('冷藏区温度数据10');
            $(".bian").html('变温区温度数据20');
            $(".dong").html('冷冻区温度数据30');
        });
    </script>

</head>
<body>

        <p class="device-control">
              <ul>
                  <li> <span class="leng">3</span><i>℃</i>
                      <p>冷藏区</p>
                  </li>
                  <li class="line"></li>
                  <li> <span class="bian">5</span><i>℃</i>
                      <p>变温区</p>
                  </li>
                  <li class="line"></li>
                  <li> <span class="dong">-18</span><i>℃</i>
                      <p>冷冻区</p>
                  </li>
              </ul>
          </p>

          <li onclick="changeTemper($(this),1)">
              <p class="control-icon">
                  <img src="images/refrigeratorControl/collectionOffImages/virtual-collection-normal1@3x.png"/>
              </p>
              <p>冷藏区 <span class='leng'>3</span>℃</p>
          </li>
          <li onclick="changeTemper($(this),2)">
              <p class="control-icon">
                  <img src="images/refrigeratorControl/collectionOffImages/virtual-collection-normal2@3x.png"/>
              </p>
              <p>变温区 <span class="bian">-5</span>℃</p>
          </li>
          <li onclick="changeTemper($(this),3)">
              <p class="control-icon"><img
                      src="images/refrigeratorControl/collectionOffImages/virtual-collection-normal3@3x.png"/></p>
              <p>冷冻区 <span class="dong">-22</span>℃</p>
          </li>
</body>
</html>

注意，下面黄色区域的span, 我为了方便加了和上面白色部分数据对应一致的class。

Wie +0
Antwort hinzufügen
刘奇
刘奇2017-07-05 10:51:08 1 Etage
方法有很多

不用寻思的最笨的方法

<p>
    <h1>上面</h1>
    <p id="s1">12</p>
    <p id="s2">13</p>
    <p id="s3">14</p>
</p>

<p>
    <h1>下面</h1>
    <p id="x1">5</p>
    <p id="x2">6</p>
    <p id="x3">7</p>
</p>

<script>
window.onload = function() {
    document.getElementById("x1").innerHTML = document.getElementById("s1").innerHTML
    document.getElementById("x2").innerHTML = document.getElementById("s2").innerHTML
    document.getElementById("x3").innerHTML = document.getElementById("s3").innerHTML
}
</script>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage