How to make the temperature data of the upper yellow area and the lower white area the same after the page is loaded
The yellow part is written in the tag using HTML
The white part is controlled by JS. It can be increased or decreased, but the data can be kept consistent after increasing or decreasing.
But there is no way to ensure that the data is consistent when the page is first loaded
Please give me some advice
The code for the yellow area in the upper half
<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>
White area in the lower half
<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>
Just fill in the same data when the page loads.
Note that for the span in the yellow area below, I added a class that corresponds to the data in the white area above for convenience.
There are many methods
The stupidest way without thinking