js - 如何根据彼此管理多个按钮

Question

这个问题更多的是关于想法而不是编程麻烦。 考虑一下屏幕上有20个按钮的情况。这是某种管理页面，您可以在其中为用户启用某些功能，但根据当前用户的属性，某些功能可能会打开或关闭。一些功能也影响其他功能：

考虑这样的4个按钮：

sex (male/female) 
age (child, adult, old) 
wear (pants, dress, hat) 
alcohol (vodka, beer) 
drive (yes, no)

所以选择男性，关掉穿衣服的可能性。 选择孩子会关闭饮酒和开车的可能性。 选择任何酒精都会增加驾驶的可能性。

因此，您可以看到每个按钮可能会影响选择任何其他按钮的可能性。这里的例子非常简单，但我正在寻找可扩展且易于阅读的解决方案。我想避免像：

$('.age').click(function () {
        if ( age == "child") { alcohol = disabled; driving = disabled }
})
$('.alcohol').click(function () {
        if ( alcohol == disabled ) { driving = disabled }
})

由于更复杂，因此很难维护。

所以问题就出现了：你能提供任何聪明的想法来管理js / jquery中彼此保持某种关系的多个按钮吗？我的意思是......就像＃34;创建每个按钮（列）和所有其他按钮（行）的二维数组，以及它们交叉的位置是真实的可见性，而假的是不可见性＆＃34;或类似的东西？

的问候， Kalreg。

Answer 1

我希望我能正确地解释这一点。

您正在讨论的有关管理输入/按钮等之间关系的过程通常称为状态管理。

有几个Javascript库/框架正是如此。由于这个原因，Vue / React / Angular等前端库框架的兴起已经越来越受到jquery /标准JS的欢迎。随着事件之间的依赖关系变得更加复杂，切换到擅长状态管理的库将使您的生活更加轻松。用于举例说明的常见模因/图片如下。

你可能想看看这样的事情。 https://vuejs.org/v2/guide/state-management.html

或

https://reactjs.org/docs/state-and-lifecycle.html

如果您有具体问题，请告诉我们。很抱歉发布链接作为答案，但在您的情况下，我认为这是最有意义的。