搜索

首页  >  问答  >  正文

javascript - JS JQ数据初始化的问题

如何让页面在加载之后 让上面黄色区域 跟下面白色区域的 温度数据是相同的

黄色部分 是用HTML写在标签里面的

白色部分 是用JS 控制的 可以增加 减小 但是 增加 减少之后可以保持数据一致

但是没有办法做到页面首次加载的时候数据一致

求教大神
上半部分黄色区域的代码

  <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>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梦2757 天前828

全部回复(2)我来回复

  • 曾经蜡笔没有小新

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

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

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

    回复
    0
  • 怪我咯

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

    方法有很多

    不用寻思的最笨的方法

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

    回复
    0
  • 取消回复