search

Home  >  Q&A  >  body text

javascript - JS JQ data initialization problem

How to make the temperature data of the upper yellow area and the lower white area the same after the page is loaded

The yellow part is written in the tag using HTML

The white part is controlled by JS. It can be increased or decreased, but the data can be kept consistent after increasing or decreasing.

But there is no way to ensure that the data is consistent when the page is first loaded

Please give me some advice
The code for the yellow area in the upper half

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

White area in the lower half

  <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梦2743 days ago822

reply all(2)I'll reply

  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-07-05 10:51:08

    Just fill in the same data when the page loads. 

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

    Note that for the span in the yellow area below, I added a class that corresponds to the data in the white area above for convenience.

    reply
    0
  • 怪我咯

    怪我咯2017-07-05 10:51:08

    There are many methods

    The stupidest way without thinking

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

    reply
    0
  • Cancelreply