jQuery 具有不同函数参数的多个单击事件处理程序，重构。

Question

我有以下 HTML 代码和以下 jQuery 代码，引用一个名为 Game 的构造函数和一个名为 roll 的函数。根据您在 HTML 文件中按下的按钮，我将不同的参数传递给每个偶数处理程序，但是我想知道您将如何重构它？非常感谢

HTML代码：

<section>
      <h1>Score:</h1>
      <h1 id="score"></h1>
      <p>
        <button id="1">1</button>
        <button id="2">2</button>
        <button id="3">3</button>
        <button id="4">4</button>
        <button id="5">5</button>
        <button id="6">6</button>
        <button id="7">7</button>
        <button id="8">8</button>
        <button id="9">9</button>
        <button id="10">10</button>
      </p>
    </section>

jQuery代码：

$(document).ready(function() {
  var game = new Game();
  $('#score').text(game.score());
  $('#1').on('click', function() {
    game.roll(1);
    $('#score').text(game.score());
  });
  $('#2').on('click', function() {
    game.roll(2);
    $('#score').text(game.score());
  });
  $('#3').on('click', function() {
    game.roll(3);
    $('#score').text(game.score());
  });
  $('#4').on('click', function() {
    game.roll(4);
    $('#score').text(game.score());
  });
  $('#5').on('click', function() {
    game.roll(5);
    $('#score').text(game.score());
  });
  $('#6').on('click', function() {
    game.roll(6);
    $('#score').text(game.score());
  });
  $('#7').on('click', function() {
    game.roll(7);
    $('#score').text(game.score());
  });
  $('#8').on('click', function() {
    game.roll(8);
    $('#score').text(game.score());
  });
  $('#9').on('click', function() {
    game.roll(9);
    $('#score').text(game.score());
  });
  $('#10').on('click', function() {
    game.roll(10);
    $('#score').text(game.score());
  });

});

Answer 1

我建议两种不同的方法：

1)使用服务器端语言，例如PHP甚至动态生成布局的框架

2)使用同样的结构，尝试套用以下代码：

 <section>
  <h1>Score:</h1>
  <h1 id="score"></h1>
  <p>
    <button class="gameBtn" id="1">1</button>
    <button class="gameBtn" id="2">2</button>
    <button class="gameBtn" id="3">3</button>
    <button class="gameBtn" id="4">4</button>
    <button class="gameBtn" id="5">5</button>
        <button class="gameBtn" id="6">6</button>
        <button class="gameBtn" id="7">7</button>
        <button class="gameBtn" id="8">8</button>
        <button class="gameBtn" id="9">9</button>
        <button class="gameBtn" id="10">10</button>
      </p>
    </section>

和jquery：

$(document).ready(function() {
var game = new Game();
$('#score').text(game.score());
$('.gameBtn').on('click', function() {
game.roll(parseInt($(this).attr('id')));
$('#score').text(game.score());
});

});

Answer 2

试试下面的方法，你可以摆脱所有多余的事件处理程序。

HTML

<section>
      <h1>Score:</h1>
      <h1 id="score"></h1>
      <p>
        <button data-id="1" id="1">1</button>
        <button data-id="2" id="2">2</button>
        <button data-id="3" id="3">3</button>
        <button data-id="4" id="4">4</button>
        ..........
      </p>
</section>

JQUERY

$('button').click(function(){
    var id = $(this).data('id')
    game.roll(id);
    $('#score').text(game.score());
});

Answer 3

您可以执行以下操作：

$(document).ready(function() {
  var game = new Game();
  $('#score').text(game.score());
  $('.some_class').on('click', function(){
        game.roll($(this).attr('id'));
        $('#score').text(game.score());
  });
});

Answer 4

您可以将 class 称为 "call-roll"（fr 示例）放在每个按钮中，并将您的 js 代码设置为如下所示：

$(document).ready(function(){
    $('.call-roll').click(function(){
     var value = $(this).text();
     game.roll(value);
     $('#score').text(game.score());
    });
});

jQuery 具有不同函数参数的多个单击事件处理程序，重构。

jQuery multiple on click event handler with different function argument, refactor.

jquery

refactoring

function

event-handling