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

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代码的' on -click‘部分(下面是你登录控制台的地方)详细说明成功后会发生什么。

例如：(关闭示例)

 $('.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) {
        },
    });
});