时间戳

首页 > 解决方案 > 一次单击遍历数组

javascript - 一次单击遍历数组

问题描述

我正在学习基本的 JavaScript 并构建一个小型酒店应用程序来练习。尝试一次单击一次遍历数组时遇到了问题。意思是……我想在鼠标单击时进行并遍历数组中的一个索引。基本上可以通过单击鼠标一次显示一家酒店的信息。我写了一些实际有效的代码，但我认为必须有更好的方法来做到这一点。我想知道什么是更有效的方法。

我的 HTML

<body>

  <div class="background">
    <div class="cover">
      <div class="space"></div>
      <div id="button">
        <h1>Check Availablility</h1>
      </div>
      <div class="name-div">
        <h1 id="name"></h1>
      </div>
      <div class="rooms-div">
        <h1 id="rooms"></h1>
        <h3>rooms left</h3>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>

我的 JavaScript

function Hotel(name, rooms, booked) {
  this.name = name;
  this.rooms = rooms;
  this.booked = booked;

  this.checkAvailability = function () {
    return this.rooms - this.booked;
  }

};

var quay = new Hotel('Quay', 40, 25);
var park = new Hotel('Park', 100, 33);
var dream = new Hotel('Dream', 77, 40);
var cod = new Hotel('Cod', 49, 21);
var hotels = [quay, park, dream, cod];

const button = document.getElementById('button');
const name = document.getElementById('name');
const rooms = document.getElementById('rooms');

var i = 0;
button.addEventListener('click', function () {
    if (i < hotels.length) {
      name.textContent = hotels[i].name;
      rooms.textContent = hotels[i].checkAvailability();
      i++;
      if (i == hotels.length) {
        i = 0;
      }
    }
});

任何见解都会很棒。谢谢！

标签： javascript

解决方案

我可能大部分时间都使用你的方法，但很高兴知道自 ECMAScript 2015 以来我们可以在这种情况下使用生成器函数。一个基本的例子可能是：

function* idMaker() {
  var index = 0;
  while (index < index+1)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

在您的实现中可能是这样的：

function* doSomethingOnClick(length){
        var index = 0;
        while(index < length){
         name.textContent = hotels[index].name;
         rooms.textContent = hotels[index].checkAvailability();
          yield index++;
          if(index==length){
            index = 0;  
          }
        }

      }

var gen = doSomethingOnClick(hotels.length);

      button.addEventListener('click', function () {
        gen.next();
    })

这里有一个完整的例子https://jsfiddle.net/uh7n329s/9/

推荐阅读