帶有不同函數參數，重構的單擊事件處理程序上的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

請嘗試以下操作，您可以擺脫所有冗餘事件處理程序。

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 2

我建議兩個型動物技術途徑：

1）使用服務器端的語言，諸如PHP或甚至用於生成佈局dinamicaly

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 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

你可以把類稱爲「呼叫卷」（FR爲例）在每個按鈕和SE你的js代碼是這樣的：

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