同时调用相同的功能

时间：2018-09-02 21:38:36

标签： javascript jquery html

我在页面上有20个按钮，我希望每个按钮都调用一个从0到10分钟的计时器。我正在使用setInterval每分钟调用一次函数，然后将其添加到计数器。如果我只有一个按钮，那么效果很好，但是正如我所说的，我有多达20个按钮都需要做同一件事。我该如何工作？ 

function countdown() {
  var counter = 0;
  var timer = setInterval(function() {
    counter++;
    $("#init").html(counter);
    if (counter >= 10) {
      clearInterval(timer)
      counter = 0;
    }
  }, 60000);
}

$(function() {
  $("#init").click(function() {
    countdown();
  });
});
body {
  background-color: grey;
}

h1 {
  color: white;
}

.main {
  width: 100%;
  text-align: center;
}

.container {
  width: 45%;
  left: 50%;
  border: 1px solid white;
  float: left;
  margin: 0 2%;
}

.table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.box {
  width: 75px;
  height: 75px;
  border: 1px solid black;
  margin: auto;
  background-color: white;
}

.button {
  margin-top: 50px;
  width: 75px;
  height: 75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="container">
    <h1>Table One</h1>
    <div class="table">
      <div><button id="init" class="button" type="button">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
    </div>
  </div>
  <div class="container">
    <h1>Table Two</h1>
    <div class="table">
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
      <div><button class="button" type="button" id="timerstart">Start</button></div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

只需使用唯一的选择器来找到您的按钮并将click事件添加到该按钮，例如：

  $("[data-countdown]").click(function( e ) {
    countdown( e.target );
  });

现在，用于获取匹配按钮的选择器已绑定到一个名为data-countdown的数据属性。具有此属性的任何html元素都将自行激活计时器。事件参数将包含真正被点击的按钮，该按钮由e.target标识。您可以将按钮用作倒数计时功能的参数，并稍加更改以将给定参数作为目标。

（我减少了计时器运行满的时间，目的是确保您不必等一分钟即可看到更改；））

function countdown( button ) {
  var timer = $(button).data('timer')
  if (timer) {
    // has a timer
    return;
  }
  var counter = 0;
  $(button).data('timer', setInterval(function() {
    counter++;
    $(button).html(counter);
    if (counter >= 10) {
      clearInterval( $(button).data('timer') )
      $(button).data('timer', null);
      counter = 0;
    }
  }, 60) );
}

在这里，我将计时器保存为按钮的属性，并在其运行过程中将其删除。这样，您可以重新启动计时器，并且两次单击按钮不会两次启动倒数计时，这在您的问题中并未真正定义

function countdown( button ) {
  var timer = $(button).data('timer')
  if (timer) {
    // has a timer
    return;
  }
  var counter = 0;
  $(button).data('timer', setInterval(function() {
    counter++;
    $(button).html(counter);
    if (counter >= 10) {
      clearInterval( $(button).data('timer') )
      $(button).data('timer', null);
      counter = 0;
    }
  }, 60) );
}

$(function() {
  $("[data-countdown]").click(function(e) {
    countdown( e.target );
  });
});
body {
  background-color: grey;
}

h1 {
  color: white;
}

.main {
  width: 100%;
  text-align: center;
}

.container {
  width: 45%;
  left: 50%;
  border: 1px solid white;
  float: left;
  margin: 0 2%;
}

.table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  padding: 10px;
}

.box {
  width: 75px;
  height: 75px;
  border: 1px solid black;
  margin: auto;
  background-color: white;
}

.button {
  margin-top: 50px;
  width: 75px;
  height: 75px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="container">
    <h1>Table One</h1>
    <div class="table">
      <div><button class="button" data-countdown type="button">Start</button></div>
      <div><button class="button" data-countdown type="button">Start</button></div>
      <div><button class="button" data-countdown type="button">Start</button></div>
      <div><button class="button" data-countdown type="button">Start</button></div>
      <div><button class="button" data-countdown type="button">Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
    </div>
  </div>
  <div class="container">
    <h1>Table Two</h1>
    <div class="table">
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
      <div><button class="button" data-countdown type="button"Start</button></div>
    </div>
  </div>
</div>

答案 1 :(得分：0)

  1. 不要在多个元素上设置相同的ID。
  2. 使用点击事件来调用您的功能。

<button class="button" type="button" onclick="countdown()">Start</button>

答案 2 :(得分：0)

假设您希望每个按钮显示间隔而不是“开始”； 循环浏览所有按钮，并为每个按钮创建一个单独的间隔。

```

function countdown(el) {
  var counter = 0;
  var timer = setInterval(function() {
    counter++;
    $(el).html(counter);
    if (counter >= 10) {
      clearInterval(timer)
      counter = 0;
    }
  }, 60000);
}

const buttons = $('button');
for (let i = 0; i < buttons.length; i++) {
  countdown(buttons[i])
}
相关问题
最新问题