简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
javascript - JS JQ数据初始化的问题
过去多啦不再A梦
过去多啦不再A梦 2017-07-05 10:49:08
0
2
650

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

黄色部分 是用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梦

모든 응답(2)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-07-05 10:51:08 2층

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

<!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 1층
方法有很多

不用寻思的最笨的方法

<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
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！