根据 CSV 值切换可见性答案

【问题标题】：Toggle visibility based on CSV values根据 CSV 值切换可见性
【发布时间】：2020-01-16 09:00:47
【问题描述】：

我正在尝试为我们的办公室创建一个仪表板，并且我想显示会议室的占用情况（很遗憾，我们没有合适的会议室系统）。我有一些传感器可以输出是否检测到运动的 CSV，并且我有一个办公室计划，每个房间都有绿色或红色覆盖层。

我遇到的问题是如何根据 CSV 值在仪表板中切换绿色或蓝色的可见性。 IE。如果最后一个值为“MotionDetected”，则显示红色，如果该值不是“MotionDetected”，则显示绿色。

我对任何编码都很陌生，所以我只有基本知识。任何帮助将不胜感激！

提前致谢！

预期的输出是，如果 CSV 中的最后一个值为“MotionDetected”，则显示为红色，如果该值不是“MotionDetected”，则显示为绿色。

【问题讨论】：

你好！您是否介意分享您目前获得的代码以及哪些代码对您有效或无效？
首先你说的是绿色或蓝色，然后是红色或绿色。这是在网页中吗？你要改变css样式的颜色吗？我们需要知道很多可能性。
大家好。感谢您的快速回复。 @Deryck，目前我还没有为这部分编写任何代码。
@wazz，是的，我的想法是办公室的平面图嵌入到 HTML 中，阴影在 CSS 中。然后我需要指示颜色的变化显示在 CSS 文件中。
我在这里添加了概念图：dropbox.com/s/kjtdm86cw253jyz/…

标签： javascript html css csv

【解决方案1】：

获取 csv 的最后一个值：Get last part of CSV string

JavaScript：

var myCSV = "red,yellow,green,blue";
var csv_Data = myCSV.split(',');
var last = csv_Data[csv_Data.length - 1];
// or
//var last = myCSV.substr(myCSV.lastIndexOf(',') + 1);


// get the thing that changes color.
var ele = document.getElementById("theThingThatChangesColor");

if(last === "MotionDetected") {
    ele.style.backgroundColor = "red";
} else {
    ele.style.backgroundColor = "green";
}

如果你在一个 css 文件中有你需要的类，你可以改变类而不是样式：JS Change class of element

【讨论】：

谢谢 wazz。如果您不介意，我有几个后续问题？ 1) 对于上面的“获取 CSV 字符串的最后一部分”和您的代码，我是否正确地说这些需要输入到单独的 javascript 文件中并加载到 HTML 中？ 2) CSV 解析代码似乎引用了一个 PHP 文件。我需要创建一个 php 文件来处理 CSV 吗？如果这些是明显的问题，我们深表歉意！再次感谢！
1 - 是/或者 - 你可以把js放到一个单独的js文件里引用，也可以直接放在html页面上。 2 -- php 的东西只在链接的 question 中，在这里不相关，只是链接的答案。顺便说一句，我重新阅读了最佳答案，并在我的答案中添加了另一种获取最后一个 csv 值的方法。（其中一个链接答案中甚至还有第三种方式。）
嗨 wazz，再次感谢您的帮助。我一直在努力理解代码，但我很挣扎。你能告诉我代码的“myCSV”部分是否应该换成文件路径？或者我应该在代码的开头将文件声明为一个名为“myCSV”的变量？非常感谢
见上面的更新。 myCSV 是实际的 CSV 字符串。如果您不知道如何从文件中获取字符串，我敢肯定它已在 SO 中介绍过。

【解决方案2】：

基于 wazz 的慷慨帮助，以及来自 Alan Stines on Youtube for extracting the CSV string 的一些额外输入，我使用以下代码完成了上述工作！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="CSV Parsing css.css" type="text/css" rel="stylesheet">
<title>CSV Parsing Test</title>
</head>

<body>
    <div id="output"></div>
    <img id="Background" src="Brochure QR Code.png" alt="Broken">
    <img id="TestImage" src="search.png" alt="Broken">

    <script>
        function init(){
            var myCSV = new XMLHttpRequest();
            myCSV.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200) {
                    console.log(this.responseText);
                    var csv_Data = this.responseText.split(',');
                    console.log(csv_Data);
                    var last = csv_Data[csv_Data.length - 3];
                    console.log(last);
                    var ele = document.getElementById("TestImage");

        if(last === "DetectedMovement"){
            ele.style.backgroundColor = "red";
        } else {ele.style.backgroundColor = "green";
             }
                }
            };

            myCSV.open("GET", "MotionLog_PIRTempHum001Testing R00.01.csv", true);
            myCSV.send()
        }

        window.onload = init;


    </script>
</body>
</html>

我希望分享这有帮助！

【讨论】：