有没有办法隐藏 p5js 上的所有按钮？

Question

我在浏览器中有一个p5js游戏商店。

这并不重要，但假设商店包括：

shopContents = { "Sushi": 5, "Boba": 6, "Watermelon": 3 }

我使用 for 循环为每个项目创建了一个按钮。有没有办法在按下“后退”按钮（带有 mousePressed() 功能或其他东西）时隐藏商店中的每个按钮？

我知道可以用 sushiButton.hide()、bobaButton.hide() 和 watermelonButton.hide() 对其进行硬编码，但我认为如果这是唯一的方法，那将是荒谬的，尤其是当商店的商品数量较多时。

由于按钮是动态生成的，最后可能会有很多按钮，有没有办法只隐藏所有按钮？

编辑：

这是Shop.js class:

class Shop { 
    constructor() {
        this.contents = {
            "Burger": 5,
            "Sushi": 10,
            "Hotpot": 20,
            "Boba": 6,
            "Burrito": 5
        };
        this.items = ["Burger", "Sushi", "Hotpot", "Boba", "Burrito"];
    }
}

这是我在 sketch.js 中创建按钮的函数：

function openShop(){
    if (shop.items.length >= 1){
        for (let i = 0; i < shop.items.length; i++) {
            createButton(shop.items[i], shop.items[i])
                .position(625, width/2-i*25)
                .mousePressed(intermediateFunc(shop.items[i]));
        }
    }
}

function intermediateFunc(item) {
    console.log(item)
    return function() {
        getPrice(item);
    }
}

function getPrice(item) {
    console.log(shop.contents[item]) 
}

Answer 1

将按钮作为数组存储在 Shop class 中，然后遍历所有按钮和运行 .hide() 方法。

class Shop { 
    constructor() {
        this.contents = {
            "Burger": 5,
            "Sushi": 10,
            "Hotpot": 20,
            "Boba": 6,
            "Burrito": 5
        };
        this.items = ["Burger", "Sushi", "Hotpot", "Boba", "Burrito"];
        this.buttons = [];
    }
}

function openShop() {
    if (shop.items.length >= 1){
        for (let i = 0; i < shop.items.length; i++) {
            if (this.buttons.length > 0) { // if buttons are already made, just show them
                shop.buttons[i].show();
            } else {
                shop.buttons.push(createButton(shop.items[i], shop.items[i])
                    .position(625, width/2-i*25)
                    .mousePressed(intermediateFunc(shop.items[i]));
                );
            }
        }
    }
}

function closeShop() {
    for (let i = 0; i < shop.buttons.length; i++) {
        shop.buttons[i].show();
    }
}

但是，您可能想改用这种样式，因为您已经在使用 ES6+ classes:

class Shop { 
    constructor() {
        this.contents = {
            "Burger": 5,
            "Sushi": 10,
            "Hotpot": 20,
            "Boba": 6,
            "Burrito": 5
        };
        this.items = Object.keys(this.contents); // This will always be the keys of this.contents, so do this to reduce hardcoded duplication
        this.buttons = this.items.map((itemName, idx) => {
            return createButton(itemName, itemName)
                    .position(625, width/2 - idx*25)
                    .mousePressed(intermediateFunc(itemName));
        });
    }

    open() {
        this.buttons.forEach((button) => button.show());
    }
    
    close() {
        this.buttons.forEach((button) => button.hide());
    }
}

而且我还建议更好地利用构造函数来创建多种 Shop，而无需 contents 硬编码：

class Shop { 
    constructor(contents) {
        this.contents = contents;
        this.items = Object.keys(this.contents);
        this.buttons = this.items.map((itemName, idx) => {
            return createButton(itemName, itemName)
                    .position(625, width/2 - idx*25)
                    .mousePressed(intermediateFunc(itemName));
        });
    }

    open() {
        this.buttons.forEach((button) => button.show());
    }
    
    close() {
        this.buttons.forEach((button) => button.hide());
    }
}

// Instantiate like this:
const shop = new Shop({
    "Burger": 5,
    "Sushi": 10,
    "Hotpot": 20,
    "Boba": 6,
    "Burrito": 5
});

// open shop
shop.open();

// close shop
shop.close();

有没有办法隐藏 p5js 上的所有按钮？

Is there a way to hide all buttons on p5js?

javascript

p5.js