Javascript 在Javasript中打开或关闭多个指示灯

我正在为一个房间编程，里面有不同的灯泡。灯泡应单独关闭或打开。我应该可以在change函数中添加一个id。我已经在“服务器”上创建了灯泡，在那里我可以访问图像并定义位置

所有不同的灯泡在新灯泡中都有它们的位置，Javascript应该打开或关闭它们

    private final Bulb[] bulbs = new Bulb[]{
            new Bulb(1, true, "white", "slaapkamer", 92, 31),
            new Bulb(2, false, "soft", "slaapkamer", 374, 31),
            new Bulb(3, true, "blue", "trap", 493, 325),
            new Bulb(4, false, "clear", "keuken", 832, 49),
            new Bulb(5, false, "soft white", "wc", 1109, 37),
            new Bulb(6, false, "normal", "douche", 1212, 251),
            new Bulb(7, true, "onmove", "outside", 606, -71),
    };


function change() {
    var image = document.getElementById('switch');
    var lightBulb = setBulbStatus(1, function(lightBulb) {

    document.getElementById("demo").onclick = function() {myFunction()};


        if (lightBulb.on) {
            image.src ='img/bulb-on.png';
        }
        else {
            image.src ='img/bulb-off.png';
            }

        });
}

function setBulbStatus(bulbId, okCode){
    let url = new URL("/setBulb", document.baseURI);
    url.searchParams.append("bulbId", bulbId);
    console.log("Before fetch")

    fetch(url)
        .then(response => {
            return response.json();
        })
        .then((data) => {
            console.log("Before fetch")
            console.log(data)
            okCode(data);
        },
            (error) => {
                console.error(error);
            });
    console.log("After fetch")
}

function positionBulbs(){
    let floorPlan = $("#floorplanContainer")
    let lightbulbOff = "img/bulb-off.png";
    let lightbulbOn = "img/bulb-on.png";

    fetchBulbs(function(bulbs){
        bulbs.forEach(function(bulb){
            let lightBulbSrc = bulb.on ? lightbulbOn : lightbulbOff;
            let img = $("<img>");
            img.attr("id", bulb.id)
            img.attr("src", lightBulbSrc)
            img.css({top: bulb.yPosition, left: bulb.xPosition, position:'absolute', height: 65, width: 65});
            floorPlan.append(img);
        });
    });
}

function fetchBulbs(okCode){
    let url = new URL("/bulbs", document.baseURI);

    fetch(url)
        .then(response => {
            return response.json();
        })
        .then((data) => {
            okCode(data);
        },
            (error) => {
                console.log(error);
            });
}

$( document ).ready(function() {
    positionBulbs();
});

function fetchBulbs(okCode){
    let url = new URL("/bulbs", document.baseURI);

    fetch(url)
        .then(response => {
            return response.json();
        })
        .then((data) => {
            okCode(data);
        },
            (error) => {
                console.log(error);
            });
}

专用最终灯泡[]灯泡=新灯泡[]{
新灯泡（1个，真实，“白色”，“斯拉普卡默”，92,31），
新灯泡（2个，假，“软”、“slaapkamer”，374,31），
新灯泡（3个，真，“蓝色”，“陷阱”，493325），
新灯泡（4，假，“透明”，“基肯”，832，49），
新灯泡（5，假，“软白色”，“wc”，1109，37），
新灯泡（6个，假，“正常”，“冲洗”，1212251），
新灯泡（7个，正确，“未移动”，“外部”，606，-71），
};
函数更改（）{
var image=document.getElementById（'switch'）；
var灯泡=设置灯泡状态（1，功能（灯泡）{
document.getElementById（“demo”）.onclick=function（）{myFunction（）}；
如果（灯泡打开）{
image.src='img/bulb on.png'；
}
否则{
image.src='img/bulb off.png'；
}
});
}
函数setBulbStatus（bulbId，okCode）{
让url=newURL（“/setBulb”，document.baseURI）；
url.searchParams.append（“bulbId”，bulbId）；
log（“提取前”）
获取（url）
。然后（响应=>{
返回response.json（）；
})
。然后（（数据）=>{
log（“提取前”）
console.log（数据）
代码（数据）；
},
（错误）=>{
控制台错误（error）；
});
log（“获取后”）
}
函数（）{
让floorPlan=$（“#floorplanContainer”）
让lightbulbOff=“img/bulb off.png”；
让lightbulbOn=“img/bulb on.png”；
获取灯泡（功能（灯泡）{
灯泡。forEach（功能（灯泡）{
let lightBulbSrc=bulb.on？lightbulbOn:lightbulbOff；
设img=$（“{
返回response.json（）；
})
。然后（（数据）=>{
代码（数据）；
},
（错误）=>{
console.log（错误）；
});
}
$（文档）.ready（函数（）{
位置（）；
});
函数（okCode）{
让url=newURL（“/bulls”，document.baseURI）；
获取（url）
。然后（响应=>{
返回response.json（）；
})
。然后（（数据）=>{
代码（数据）；
},
（错误）=>{
console.log（错误）；
});
}

我想我必须更新FetchBulls中的img属性。类似这样的内容：

---

$（选择器）.attr（属性，函数（索引，当前值））

您实际上不需要将灯泡的id存储在HTML属性中。您可以在收到灯泡id后立即附加单击处理程序。此行后：

floorPlan.append(img);

…请继续：

img.click(function () {
    change(img, bulb.id); // <--- pass the image and the corresponding bulb id
});

---

也考虑使用允诺API，因为<代码>取走返回一个承诺。

这样做是错误的和费时的。你应该考虑使用像KokOut.js甚至Vu.js这样的数据绑定框架。它使你的生活变得更容易。你的问题是什么？你希望你的代码做什么，它做什么？我是创造者。在一个有灯泡的房间里，我写了一些代码来打开和关闭灯泡。它工作得很好，问题是我想对不同的灯泡使用相同的代码，我所有的灯泡都有一个id，所以我如何才能更改代码，使其能对多个灯泡工作？您甚至还没有显示其中涉及的一半代码。我们需要查看mu还有更多的代码要说，这将/不会在多个灯泡上工作……这还不清楚。

change

从未被调用；

myFunction

没有定义；

fetchbulls

定义了两次；

setBulbStatus

是一个总是返回未定义的函数，但是您将它分配给

lightBulp

变量，所以y你永远无法成功地评估

lightBulp.on

。我真的不明白你怎么说这对你有效。而

演示

点击处理程序的目的是什么？？这个问题确实需要一些改进。

function change(image, bulbId) {
    setBulbStatus(bulbId, function(bulp) {
        image.src = bulb.on ? 'img/bulb-on.png' : 'img/bulb-off.png';
    });
}