如何讓按鈕根據文本文件更改顏色？

Question

我正在制作一個Web應用程序，我想根據文本文件中的“on”或“off”將狀態按鈕從紅色變為綠色。 我正在使用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) {
        },
    });
});