根据 var 值隐藏动态 JS 按钮答案

【问题标题】：Hide dynamic JS buttons based on a var value根据 var 值隐藏动态 JS 按钮
【发布时间】：2016-05-25 17:44:54
【问题描述】：

我遇到了与此类似的问题：Hide dynamically added buttons based on an if statement。借助 A Dark Room 的 JS 模组，我正在努力提高我的 JS 技能。这些 sn-ps 都不是我的，而且都运行良好。

这是创建按钮的代码 sn-p：

build: function(buildBtn) {
        var thing = $(buildBtn).attr('buildThing');
        if($SM.get('game.temperature.value') <= Room.TempEnum.Cold.value) {
            Notifications.notify(Room, _("builder just shivers"));
            return false;
        }

这个 sn-p 确保按钮保持可见，但我想更改它，以便在达到最大值时隐藏按钮。

//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
    Room.buttons[thing] = true;
    return true;
}

【问题讨论】：

标签： javascript button dynamic show-hide

【解决方案1】：

隐藏和显示元素通常是通过一个类来完成的。有一个这样的css类

.hidden {
  display : none'
}

然后在你的javascript中，根据你的情况添加或删除hidden类

 if(condition) {
    $(element).addClass('hidden');
  } else {
    $(element).removeClass('hidden');
  }

【讨论】：

【解决方案2】：

很难提出建议，因为没有足够的上下文。您显示的 sn-p 可能不仅仅负责控制按钮的可见性（尽管内联注释说它是）。因此，以下建议可能不起作用，需要更多关于您正在尝试做什么的信息以及更多代码。

如果您有权修改 sn-p，那么您可以在其中包含最大值。如果最大值是一个变量（即 myCustomMaxValue）并且它在范围内，那么我最好的猜测是在此处添加它：

var myCustomMaxValue = 88;
var someOtherVariableInScope = 50

//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
    //add your condition here and yield true/false
    var myCustomCondition = someVariableInScope > myCustomMaxValue;
    Room.buttons[thing] = myCustomCondition;
    return myCustomCondition;
}

我建议使用 debug; 关键字。将它放在 sn-p 中并打开浏览器的开发工具，它的调试器就会被命中。然后，您可以检查范围内的变量并验证 sn-p 实际上负责动态显示和隐藏按钮。

//show button if one has already been built
if($SM.get('game.buildings["'+thing+'"]') > 0){
    debug;
    Room.buttons[thing] = myCustomCondition;
    return myCustomCondition;
}

【讨论】：