javascript - 为同一事件添加事件监听器

Question

所以我当前隐藏了一些 div 标签，我想通过按 Enter 键来逐个显示它们。

我想要发生的事情:我按 Enter 键并显示第一个 div 标签，然后我第二次按 Enter 键以查看第二个 div 标签。

发生了什么:我按一次 Enter 键，两个 div 标签都出现了。

在本例中，我要显示的第一个 div 标签是“intro”，第二个是“body”。我在 jsbin 上运行这个网站，并且使用 chrome，如果有帮助的话。

这是我的 JavaScript:

//***********************************************************

//  BODY MODULE

var bodyController = (function(){
  var enterBool;

  var reveal = function(){
    if(enterBool){
      document.getElementById("evidence").style.display = "block";
      enterBool = false;
    }
  };

  var enterListen = function(){
    document.addEventListener("keydown", function(event){
      if(event.keyCode === 13){
        document.addEventListener("keyup", function(event){
          if(event.keyCode === 13){
            enterBool = true;
            reveal();
          }
        });
      }
    });
  };

  return{
    enterBoolBody: enterBool,
    enterListenBody: function(){
      enterListen();
    }
  }
})();

//***********************************************************

//  INTRO MODULE

var introController = (function(){
  var enterBool;

  var reveal = function(){
    if(enterBool){
      document.getElementById("body").style.display = "block";
      enterBool = false;
    }
  };

  var enterListen = function(){
    document.addEventListener("keydown", function(event){
      if(event.keyCode === 13){
        document.addEventListener("keyup", function(event){
          if(event.keyCode === 13){
            enterBool = true;
            reveal();
          }
        });
      }
    });
  };

  return{
    enterBoolIntro: enterBool,
    enterListenIntro: function(){
      enterListen();
    }
  }
})();

 //***********************************************************

 //  CONTROL MODULE

 var controller = (function(introCtrl, bodyCtrl, evidenceCtrl, infoCtrl, 
 conclusionCtrl){  
  var eventListeners = function(){
     introCtrl.enterListenIntro();
     bodyCtrl.enterListenBody();
  };

  return{
    init: function(){
      eventListeners();
    }
  }
 })(introController, bodyController, evidenceController, 
    infoController, conclusionController);

 //***********************************************************

 controller.init();

Answer 1

我认为你可能有点过度设计了。您所需要的只是一个事件监听器来检查输入。然后检查第一个 div 是否显示，如果没有显示。如果显示第一个 div，请检查第二个 div 是否显示并显示它。

请注意，IE9 不支持 classList(如果这对您很重要的话)。 https://caniuse.com/#feat=classlist

(function(window, document, undefined)
{
  document.addEventListener('keyup', showDivs, false);
})(window, window.document);

function showDivs(event)
{
  event = event || window.event;
  var divsToShow = document.getElementsByClassName("Display-Div");

  for (var i = 0; i < divsToShow.length; i++) {
    if (!divsToShow[i].classList.contains("Block")) {
      divsToShow[i].classList.add("Block");
      break;
    }
  }
}

.Hidden {
  display: none;
}

.Block {
  display: block;
}

<div class="Hidden Display-Div">This</div>
<div class="Hidden Display-Div">Now</div>
<div class="Hidden Display-Div">Works</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Any</div>
<div class="Hidden Display-Div">Div</div>
<div class="Hidden Display-Div">With</div>
<div class="Hidden Display-Div">Class</div>
<div class="Hidden Display-Div">Display-Div</div>