基于PLC嵌入式Web服务器的HTML页面：根据布尔变量控制图片显隐的问题求助

嘿，别担心你的英文，完全没问题！我来帮你看看这个图片显隐的问题~

首先，我注意到你现在的代码里，toggleImage()函数只在页面加载完成时调用了一次，但当HeatersEnable变量的状态变化时，这个函数并没有被重新触发，所以图片的状态不会跟着变量更新，一直保持初始的显示状态。另外，还要确认mDeviceVariables['HeatersEnable'].value的返回值类型——有些PLC系统返回的布尔值可能是字符串（比如"true"/"false"）或者数字（1/0），而非原生布尔值，这也会导致判断逻辑失效。

下面是具体的修改方案：

1. 让变量更新时自动触发图片状态切换 #

你需要利用deviceengine.js提供的变量更新回调机制，在每次变量刷新时重新调用toggleImage()。修改$(window).load中的代码：

$(window).load(function() {
    startRefresh(mRefreshInterval);
    // 监听变量更新事件，每次变量刷新后执行状态切换
    mDeviceEngine.onVariablesUpdated(function(vars) {
        mDeviceVariables = vars;
        toggleImage();
    });
    // 页面初始加载时执行一次
    toggleImage();
});

2. 兼容不同类型的布尔值返回 #

修改toggleImage()函数，确保能正确识别字符串、数字、原生布尔值等多种返回格式：

function toggleImage() {
    // 先判断变量是否存在，避免报错
    if (!mDeviceVariables || !mDeviceVariables['HeatersEnable']) {
        return;
    }
    var heatersEnabled = mDeviceVariables['HeatersEnable'].value;
    var image = document.getElementById("my-icon");
    
    // 兼容多种布尔值格式
    var isEnabled = false;
    if (typeof heatersEnabled === 'boolean') {
        isEnabled = heatersEnabled;
    } else if (typeof heatersEnabled === 'number') {
        isEnabled = heatersEnabled === 1;
    } else if (typeof heatersEnabled === 'string') {
        isEnabled = heatersEnabled.toLowerCase() === "true" || heatersEnabled === "1";
    }

    image.style.display = isEnabled ? "block" : "none";
}

3. 可选：设置图片初始隐藏状态 #

如果HeatersEnable默认是关闭状态，你可以直接在HTML中给图片添加初始隐藏样式，避免页面加载时短暂显示：

<img src="my-icon.png" id="my-icon" style="display: none;">

这样修改后，每次PLC的HeatersEnable变量更新时，图片的显示状态都会自动同步啦！要是还有问题，咱们再进一步排查~

备注：内容来源于stack exchange，提问作者Стефан Периндев