javascript - JS JQ数据初始化的问题
本文介绍了javascript - JS JQ数据初始化的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如何让页面在加载之后 让上面黄色区域 跟下面白色区域的 温度数据是相同的
黄色部分 是用HTML写在标签里面的
白色部分 是用JS 控制的 可以增加 减小 但是 增加 减少之后可以保持数据一致
但是没有办法做到页面首次加载的时候数据一致
求教大神
上半部分黄色区域的代码
<div 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>
</div>下半部分白色区域
<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>
解决方案
页面加载的时候填充相同的数据即可。
<!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>
<div 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>
</div>
<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。
这篇关于javascript - JS JQ数据初始化的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
