如何解决 jQuery 代码中的递归问题

Question

我从事游戏项目已有一段时间了。我使用过引导程序和 jQuery。但为了简单起见，这就是我不明白的代码的样子。我希望通过单击并仅单击项目 A，项目 B 在单击后会显示并消失。我添加了一条指令，每次单击项目后都会在控制台中显示一条消息并观察会发生什么！

let elt_boxOne = $("#bx_one");
let elt_boxTwo = $("#bx_two");
elt_boxTwo.hide();

elt_boxOne.click($.proxy(function() {
  elt_boxTwo.show();
  elt_boxTwo.click($.proxy(function() {
    console.log("Hello world");
    elt_boxTwo.hide();
  }, this));
}, this));

/*As you can see the first time has no problem but if we try the second time there will be two messages and the third click will show three etc... I mean what the hell is going on???*/

#bx_one {
  width: 200px;
  height: 50px;
  background-color: red;
  text-align: center;
  font-weight: bold;
}

#bx_two {
  width: 200px;
  height: 50px;
  background-color: orange;
  text-align: center;
  font-weight: bold;
}

<div id="bx_one">Box one</div>
<div id="bx_two">Box two</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

当您单击按钮 1 时，您将多次初始化单击侦听器。您必须将其移到外部，独立于第一个单击处理程序...像这样：

顺便说一句，你不需要代理，如果你需要里面的上下文，你可以使用箭头函数。

let elt_boxOne = $("#bx_one");
let elt_boxTwo = $("#bx_two");

elt_boxTwo.hide();

elt_boxOne.click(() => {
    elt_boxTwo.show();
});

elt_boxTwo.click(() => {
    console.log("Hello world");
    elt_boxTwo.hide();
});

#bx_one {
    width: 200px;
    height: 50px;
    background-color: red;
    text-align: center;
    font-weight: bold;
}
#bx_two {
    width: 200px;
    height: 50px;
    background-color: orange;
    text-align: center;
    font-weight: bold;
}

<div id="bx_one">Box one</div>
<div id="bx_two">Box two</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

不要在“box 1”监听器中创建“box 2”监听器。只需将两个元素的点击处理程序分开即可。

const
  $boxOne = $("#bx-one"),
  $boxTwo = $("#bx-two").hide();

$boxOne.on('click', () => $boxTwo.show());

$boxTwo.on('click', () => {
  console.log("Hello world!");
  $boxTwo.hide();
});

.bx {
  width: 200px;
  height: 50px;
  text-align: center;
  font-weight: bold;
}

#bx-one { background-color: red; }
#bx-two { background-color: orange; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bx-one" class="bx">Box one</div>
<div id="bx-two" class="bx">Box two</div>

Answer 3

是的，我给出的代码很简单……但它并不能完美地说明我的问题。事实上，在我的原始代码中，这是一个当我单击按钮时弹出的对话框，并且该对话框包含一个“确认”按钮。我希望当我单击确认按钮时（与此代码中控制台中“hello world”的显示不同），确认消息会从对话框发送到包含我单击的第一个按钮的对象。所以我告诉自己，这两个点击事件一定是有关联的。我可能错了