提问人：Стефан Периндев 提问时间：4/10/2023 最后编辑：RobСтефан Периндев 更新时间：4/11/2023 访问量：57
HTML 根据变量显示/隐藏图像
HTML Show/hide image depending on variable
问：
首先，我要为我的英语不好道歉。我是 java 的新手，我有这个 ussue。我有一个带有嵌入式 Web 服务器的 PLC。我可以通过自定义htmlpages来配置Web服务器。我想根据布尔变量的状态显示或隐藏图像 - “HeatersEnable”。我创建的那个瓦特，但图像不断显示。请帮助我在代码中更改以下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="lib/carel.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="Content-Language" content="en"/>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>AHU </title>
<meta name="description" content="Carel C.pCO Custom Webpage"/>
<style type="text/css">
div.ChartsLink {
position: absolute;
display: block;
height: 25px;
background: #B0B0B0;
padding: 5px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
div.ChartsLink a{color:#000000; text-decoration: none}
div.ChartsLink a:hover{color:#FF7474;text-decoration: underline}
div.ChartsLink a#activelink{color:#FF7474;text-decoration: none}
</style>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery-csv.js"></script>
<script type="text/javascript" src="lib/deviceengine.js"></script>
<script type="text/javascript" src="lib/dynamicvars.js"></script>
<script type="text/javascript">
var mRefreshInterval = 1; // seconds
var mDeviceEngine = new DeviceEngine();
var mDeviceVariables = null;
function toggleImage() {
var heatersEnabled = mDeviceVariables['HeatersEnable'].value;
var image = document.getElementById("my-icon");
if (heatersEnabled) {
image.style.display = "block";
} else {
image.style.display = "none";
}
}
// README: CUSTOMIZATION STEP1 ***************************************************************
// List here all your variables to attach their periodical refresh to javascript engine.
// Variable name should be surrounded by single quotes to avoid HTML parsing errors
// (when it contains dots, for example).
// You can specify
// txt - Caption to be printed before variable's value
// um - Unit of Measurements label to be printed after the variable's value
// decimals - how many decimals to display for variables
// readonly - if variable is associated with buttons, radio, etc, and you want them disabled
// output - map that contains value->txt pairs for enum data to "nicely" display
//
var mVariablesUIModel = {
'TempSupply': {um : '°C', txt : 'Темп. подаване: '},
'TempHeatexch': {um : '°C', txt : 'Темп. ТО1: '},
'TempHeatexch2': {um : '°C', txt : 'Темп. ТО2: '},
'TempOut': {um : '°C', txt : 'Темп. външна: '},
'TempElHeater': {um : '°C', txt : 'Темп. ел.нагревател: '},
'OnOffUnitMng.KeybOnOff': {},
'HeatersEnable': {},
};
$(window).load(function() {
startRefresh(mRefreshInterval);
toggleImage();
});
</script>
</head>
<body>
<div id="header">
<div id="topmenu"><table width="100%"><tr>
<td align="center"><a href="index2.htm">HOME</a></td>
</tr></table></div></div><!-- header -->
<!-- README: CUSTOMIZATION STEP2 ***************************************************************
Put here the style for your variables display (font, default color, etc)
"DynVar" divisions must use absolute positioning and must be inside "container" division
-->
<div id="container" style="height: 1200px; width: 1500px; background: url('imgs/cleanroom-ahu-dtl.jpg'); background-size:100%; background-repeat:no-repeat;" >
<img src="my-icon.png" id="my-icon" >
<div id="TempOut" class="DynVar" style="top: 40px; left: 20px;color: #000000">Outside Temp</div>
<div id="TempElHeater" class="DynVar" style="top: 60px; left: 20px;color: #000000">El Heater Temp</div>
<div id="TempHeatexch" class="DynVar" style="top: 80px; left: 20px;color: #000000">Heat exchanger Temp</div>
<div id="TempHeatexch2" class="DynVar" style="top: 100px; left: 20px;color: #000000">Heat exchanger Temp</div>
<div id="TempSupply" class="DynVar" style="top: 120px; left: 20px;color: #000000">Supply Temp</div>
<!-- README: CUSTOMIZATION STEP2 ***************************************************************
Put here the style for your variables display (font, default color, etc)
"DynVar" divisions must use absolute positioning and must be inside "container" division
-->
<!-- README: CHART EXAMPLES ***************************************************************
Custom chart Example, how to link a page with custom realtime charting of pre-defined set of variables
-->
<div class="DynVar" style="top: 470px; left: 630px"><a href="customchart.htm"><img src="imgs/chart.png"></a></div>
<div class="DynVar" style="top: 350px; left: 50px"> <a href="customchart.htm"><img src="imgs/chart.png"></a></div>
<!-- README: BUTTON EXAMPLE ***************************************************************
ON/OFF button Example, how to create an ON/OFF button and link to application variable ("OnOffUnit")
-->
<div class="DynVar" style="top: 470px; left: 50px">
<div class="onoffswitch">
<input type="checkbox" name="HeatersEnable" class="onoffswitch-checkbox" id="myonoffswitch" onchange="sendInputValueToRemote(this);">
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>
</div><!-- container-->
</body>
</html>
我试过更改代码，但它不起作用。
答： 暂无答案
评论
mDeviceVariables['HeatersEnable'].value;