communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Problème d'initialisation des données JS JQ
过去多啦不再A梦
过去多啦不再A梦 2017-07-05 10:49:08
0
2
770

Comment rendre les données de température de la zone jaune supérieure et de la zone blanche inférieure identiques après le chargement de la page

La partie jaune est écrite dans la balise en HTML

La partie blanche est contrôlée par JS et peut être augmentée ou diminuée, mais les données peuvent rester cohérentes après avoir augmenté ou diminué

Mais il n'y a aucun moyen de garantir la cohérence des données lors du premier chargement de la page

S'il vous plaît, donnez-moi quelques conseils
Le code de la zone jaune dans la moitié supérieure

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

La zone blanche dans la moitié inférieure

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

répondre à tous(2)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-05 10:51:08 2 plancher

Remplissez simplement les mêmes données lors du chargement de la page. 

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

Notez que pour la durée dans la zone jaune ci-dessous, j'ai ajouté une classe qui correspond aux données dans la zone blanche ci-dessus pour plus de commodité.

Comme +0
Ajouter une réponse
刘奇
刘奇2017-07-05 10:51:08 1 plancher
Il existe de nombreuses méthodes

La façon la plus stupide de ne pas réfléchir

<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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal