Javascript中的闭包和onclick

我有一个简单的Javascript事件冒泡的例子（点击这个人，它会冒泡到猪）。如何使用闭包获得

var interval=0

不在全局范围内，但在html中保留

onclick=“display（'sometext'）”

var interval = 0;

function display(animal) {
  window.setTimeout(function() { showText(animal) }, interval);
  interval = interval+300;
  window.setTimeout(function() { clear() }, interval);
}

function showText(animal) {
  $(".alGore").text(animal.toUpperCase());
    $("."+animal+"-box").css({'background-color':'#ff0'});
}

function clear(animal) {
  $(".alGore").text('');
  $("*").css({background: 'transparent'});
  interval = 0;
}

---

您只需将函数包装到另一个函数中即可实现闭包。但是，由于有两个函数要绑定到同一个闭包，因此需要一个对象

看看这个：

和HTML：

<div class="center">
  <div class="pig-box center" onclick="animalBox.display('pig')">
    <img src="http://i.imgur.com/MumugGd.png" alt="pig" class="icon">     
      <div class="bear-box center" onclick="animalBox.display('bear')">
        <img src="http://i.imgur.com/p7L5DHL.png" alt="bear" class="icon">    
          <div class="man-box center" onclick="animalBox.display('man')">
            <img src="http://i.imgur.com/cKvJT7T.png" alt="man" class="icon">
          </div>
      </div>
  </div>
  <div class="alGore"></div>
</div>

请在您的帖子中包含代码中最相关的部分。链接通常可以提供额外的上下文，但不应该是唯一的参考。您可以将其包装在IIFE中，然后将事件侦听器添加到相关的div中，而不是使用onclick属性。

<div class="center">
  <div class="pig-box center" onclick="animalBox.display('pig')">
    <img src="http://i.imgur.com/MumugGd.png" alt="pig" class="icon">     
      <div class="bear-box center" onclick="animalBox.display('bear')">
        <img src="http://i.imgur.com/p7L5DHL.png" alt="bear" class="icon">    
          <div class="man-box center" onclick="animalBox.display('man')">
            <img src="http://i.imgur.com/cKvJT7T.png" alt="man" class="icon">
          </div>
      </div>
  </div>
  <div class="alGore"></div>
</div>