javascript - JS JQ數(shù)據(jù)初始化的問題
問題描述
如何讓頁面在加載之后 讓上面黃色區(qū)域 跟下面白色區(qū)域的 溫度數(shù)據(jù)是相同的
黃色部分 是用HTML寫在標(biāo)簽里面的
白色部分 是用JS 控制的 可以增加 減小 但是 增加 減少之后可以保持?jǐn)?shù)據(jù)一致
但是沒有辦法做到頁面首次加載的時(shí)候數(shù)據(jù)一致
求教大神上半部分黃色區(qū)域的代碼
<p class='device-control'><ul> <li> <span class='leng'>3</span><i>℃</i><p>冷藏區(qū)</p> </li> <li class='line'></li> <li> <span class='bian'>5</span><i>℃</i><p>變溫區(qū)</p> </li> <li class='line'></li> <li> <span class='dong'>-18</span><i>℃</i><p>冷凍區(qū)</p> </li></ul> </p>
下半部分白色區(qū)域
<li onclick='changeTemper($(this),1)'><p class='control-icon'><imgsrc='http://www.cgvv.com.cn/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal1@3x.png'/></p><p>冷藏區(qū) <span>3</span>℃</p> </li> <li onclick='changeTemper($(this),2)'><p class='control-icon'><imgsrc='http://www.cgvv.com.cn/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal2@3x.png'/></p><p>變溫區(qū) <span>-5</span>℃</p> </li> <li onclick='changeTemper($(this),3)'><p class='control-icon'><imgsrc='http://www.cgvv.com.cn/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal3@3x.png'/></p><p>冷凍區(qū) <span>-22</span>℃</p> </li>
問題解答
回答1：頁面加載的時(shí)候填充相同的數(shù)據(jù)即可。
<!DOCTYPE html><html><head> <meta charset='utf-8'> <link rel='stylesheet' > <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(’冷藏區(qū)溫度數(shù)據(jù)10’); $('.bian').html(’變溫區(qū)溫度數(shù)據(jù)20’); $('.dong').html(’冷凍區(qū)溫度數(shù)據(jù)30’);}); </script></head><body><p class='device-control'> <ul> <li> <span class='leng'>3</span><i>℃</i> <p>冷藏區(qū)</p> </li> <li class='line'></li> <li> <span class='bian'>5</span><i>℃</i> <p>變溫區(qū)</p> </li> <li class='line'></li> <li> <span class='dong'>-18</span><i>℃</i> <p>冷凍區(qū)</p> </li> </ul> </p> <li onclick='changeTemper($(this),1)'> <p class='control-icon'> <img src='http://www.cgvv.com.cn/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal1@3x.png'/> </p> <p>冷藏區(qū) <span class=’leng’>3</span>℃</p> </li> <li onclick='changeTemper($(this),2)'> <p class='control-icon'> <img src='http://www.cgvv.com.cn/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal2@3x.png'/> </p> <p>變溫區(qū) <span class='bian'>-5</span>℃</p> </li> <li onclick='changeTemper($(this),3)'> <p class='control-icon'><img src='http://www.cgvv.com.cn/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal3@3x.png'/></p> <p>冷凍區(qū) <span class='dong'>-22</span>℃</p> </li></body></html>
注意，下面黃色區(qū)域的span, 我為了方便加了和上面白色部分?jǐn)?shù)據(jù)對應(yīng)一致的class。
回答2：方法有很多不用尋思的最笨的方法
<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>
相關(guān)文章：
1. mac OSX10.12.4 (16E195)下Mysql 5.7.18找不到配置文件my.cnf2. mysql - 數(shù)據(jù)庫表中，兩個(gè)表互為外鍵參考如何解決3. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實(shí)現(xiàn)存在即更新應(yīng)該使用哪個(gè)標(biāo)簽?4. mysql - 數(shù)據(jù)庫建字段，默認(rèn)值空和empty string有什么區(qū)別 1105. mysql儲存json錯(cuò)誤6. sql語句 - 如何在mysql中批量添加用戶？7. mysql - 表名稱前綴到底有啥用？8. php - 公眾號文章底部的小程序二維碼如何統(tǒng)計(jì)？9. Navicat for mysql 中以json格式儲存的數(shù)據(jù)存在大量反斜杠，如何去除？10. mysql - 怎么生成這個(gè)sql表？
網(wǎng)公網(wǎng)安備