Maison > Questions et réponses > le corps du texte
Comment rendre les données de température de la zone jaune supérieure et de la zone blanche inférieure identiques après le chargement de la page
La partie jaune est écrite dans la balise en HTML
La partie blanche est contrôlée par JS et peut être augmentée ou diminuée, mais les données peuvent rester cohérentes après avoir augmenté ou diminué
Mais il n'y a aucun moyen de garantir la cohérence des données lors du premier chargement de la page
S'il vous plaît, donnez-moi quelques conseils
Le code de la zone jaune dans la moitié supérieure
<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>
La zone blanche dans la moitié inférieure
<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>
曾经蜡笔没有小新2017-07-05 10:51:08
Remplissez simplement les mêmes données lors du chargement de la page.
<!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>
Notez que pour la durée dans la zone jaune ci-dessous, j'ai ajouté une classe qui correspond aux données dans la zone blanche ci-dessus pour plus de commodité.
怪我咯2017-07-05 10:51:08
La façon la plus stupide de ne pas réfléchir
<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>