如何让按钮根据文本文件更改颜色？

Question

我正在制作一个 Web 应用程序，我想让一个状态按钮根据文本文件中的“开”或“关”将颜色从红色变为绿色。我正在使用 Raspberry Pi 和 Ubuntu 来“控制”Raspberry Pi。文本文件位于 Raspberry Pi 上，我让 Web 服务器通过代码读取 Raspberry Pi 上的内容。

为了打开/关闭电视，我有这些代码行（在这种情况下是打开的）

        screen = screenDAO.findById(screenCode);
        String[] args = new String[] { "/bin/bash", "-c", "ssh pi@172.19.xx.xxx 'echo \"on 0\" | cec-client -s'",
                "with", "args" };
        try {
            Process proc = new ProcessBuilder(args).start();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        File f = new File("/tmp/status.txt");
        if(f.exists()){
            f.delete();
            try {
                f.createNewFile();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        File file = new File("/tmp/status.txt");
        FileWriter fr = null;
        BufferedWriter br = null;
        try {
            // to append to file, you need to initialize FileWriter using below constructor
            fr = new FileWriter(file, true);
            br = new BufferedWriter(fr);
            for (int i = 0; i < 1; i++) {
                br.newLine();
                // you can use write or append method
                br.write("on");
            }

        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                br.close();
                fr.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return SUCCESS;
    }

用于更新我当前拥有的按钮状态

        screen = screenDAO.findById(screenCode);
        String[] args = new String[] { "/bin/bash", "-c",
                "ssh pi@172.19.67.177 /tmp/status.txt", "with", "args" };

        try {
            Process proc = new ProcessBuilder(args).start();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        String content = "";
        try {
            content = new String(Files.readAllBytes(Paths.get("/tmp/status.txt")));
            if (content.contains("on")) {
                System.out.println("The screen is turned on.");
                Boolean screenStatusOn = true;
            } else if (content.contains("off")) {
                System.out.println("The screen is turned off.");
                Boolean screenStatusOn = false;
            }
        } catch (IOException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        } 
        return SUCCESS;
    }

这就是我在 js 中所拥有的

    $('.screen-status').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'updateScreenStatus',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });
}

function initScreenControls() {
    $('.screen-on').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'turnOnScreen',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });

    $('.screen-off').on('click', function(event) {
        var $onButton= $(this);

        $.ajax({
            url : 'turnOffScreen',
            type : 'POST',
            data : "screenCode=" + $onButton.data('code'),
            success : function(data) {
                console.log(data);
            },
            error : function(data) {
            },
        });
    });
}

我希望按钮在关闭电视时变为红色，在打开时变为绿色。目前我只让它发送“屏幕已打开”。 （或关闭）到控制台。

Answer 1

您可以在您的 javascript 代码的“点击”部分（在您登录控制台的下方）中详细说明成功时会发生什么。

例如：（非示例）

 $('.screen-off').on('click', function(event) {
    var $onButton= $(this);

    $.ajax({
        url : 'turnOffScreen',
        type : 'POST',
        data : "screenCode=" + $onButton.data('code'),
        success : function(data) {
            console.log(data);
            /*document.getElementById("OnButton").style.backgroundColor = "red"; */
            $(this).css('background-color', 'red');
        },
        error : function(data) {
        },
    });
});