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. angular.js - 不适用其他构建工具，怎么搭建angular1项目2. python如何不改动文件的情况下修改文件的 修改日期3. mysql - 一个表和多个表是多对多的关系，该怎么设计4. javascript - git clone 下来的项目 想在本地运行 npm run install 报错5. mysql主从 - 请教下mysql 主动-被动模式的双主配置 和 主从配置在应用上有什么区别？6. android-studio - Android 动态壁纸LayoutParams问题7. 主从备份 - 跪求mysql 高可用主从方案8. angular.js - 三大框架react、vue、angular的分析9. python 如何实现PHP替换图片 链接10. python - django 里自定义的 login 方法，如何使用 login_required()
网公网安备