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'><imgsrc='https://www.haobala.com/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal1@3x.png'/></p><p>冷藏区 <span>3</span>℃</p> </li> <li onclick='changeTemper($(this),2)'><p class='control-icon'><imgsrc='https://www.haobala.com/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal2@3x.png'/></p><p>变温区 <span>-5</span>℃</p> </li> <li onclick='changeTemper($(this),3)'><p class='control-icon'><imgsrc='https://www.haobala.com/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal3@3x.png'/></p><p>冷冻区 <span>-22</span>℃</p> </li>
问题解答
回答1：页面加载的时候填充相同的数据即可。
<!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='https://www.haobala.com/wenda/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='https://www.haobala.com/wenda/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='https://www.haobala.com/wenda/images/refrigeratorControl/collectionOffImages/virtual-collection-normal3@3x.png'/></p> <p>冷冻区 <span class='dong'>-22</span>℃</p> </li></body></html>
注意，下面黄色区域的span, 我为了方便加了和上面白色部分数据对应一致的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>
相关文章：
1. javascript - npm下载的模块不完整是什么问题？2. java - Spring事务回滚问题3. apache - 本地搭建wordpress权限问题4. python - 管道符和ssh传文件5. node.js - 我想让最后进入数据库的数据，在前台最先展示，如何做到？6. wordpress - Nginx中禁止访问txt，robots.txt文件例外，规则该怎么写？7. 刚放到服务器的项目出现这中错误，有高手指点吗8. python - django 按日归档统计订单求解9. python 操作mysql如何经量防止自己的程序在之后被恶意注入（说白了就是问一下python防注入的一些要点）10. mysql - 面试题：如何把login_log表转换成last_login表？
网公网安备