Question

这是我的代码：

var counter = 0;

function showAddButton() {
  var cnt = document.getElementsByClassName('img-cntnr').length;
  counter++;  // for detecting double excecution in debugger

  if (cnt < 4) {
    $('#div-add').show();
  } else {
    $('#div-add').hide();
  }
}

//someweher in my code
showAddButton();

当我在代码中调用函数时，JavaScript会执行$('#div-add').show();和$('#div-add').hide();行。

我已经定义了一个变量（counter），并在调试器中观察了检测并行两次调用的情况。但是没有任何并行执行，并且在第一次调用时，if语句执行两个块！

我该如何解决？谢谢。

Answer 1

您的问题很可能是您的if语句不是您想要的逻辑，也许您的＆lt;应该是一个＆gt;，因为即使你多次击中它也不应该真正影响问题的结果，因为如果你计算的唯一方法就是实际上大于你的预期。

所以要么其他东西都隐藏了div，有些东西正在修改类计数，或者你的逻辑不是你想象的那样。

但是你可以尝试这行代码来摆脱你拥有的所有多余逻辑

$('#div-add').toggle($('.img-cntnr').length < 4)

您可以在切换功能中使用布尔值来设置显示

您可以看到切换文档here

Answer 2

此处查看此jsFiddle

我看不到任何重复的调用，也没有if/else的两个块在一次调用中执行。

showAddButton始终显示元素，因为它取决于：

document.getElementsByClassName('img-cntnr').length;

获取与img-cntnr类匹配的元素的长度。因此，除非您要将具有该类的元素添加到DOM，否则该计数将始终相同。

如果您可以向我们展示同时打印show和hide的jsFiddle，我们将会有所收获。

Answer 3

肯定会有其他因素导致代码再次运行。我要做的是为你的js添加一个杀手并修改else语句，如下所示：

var counter = 0;

var killer = false;

function showAddButton() {
  var cnt = document.getElementsByClassName('img-cntnr').length;
  counter++;  // for detecting double excecution in debugger

  if (cnt < 4) {
    $('#div-add').show();
    killer = true
  } else if(killer === false) {
    $('#div-add').hide();
  }
}

//someweher in my code
showAddButton();

javascript - if语句同时包含if和else块

3 个答案: