兩個單獨的函數，但是我希望它們同時被初始化

Question

我有這2個單獨的函數，每個函數都由2個不同的輸入按鈕初始化，這些按鈕用於傳遞兩個不同的國家/地區名稱，以從SQL數據庫創建兩個國家/地區的html表比較。

我該如何重寫此代碼以使用1個按鈕（而不是2個）來初始化兩個功能？

    <script type="text/javascript">

        function display_results_table() {
            $("medal_table").empty();
            $('<table id = "results_table">').appendTo('#medal_table');
            $.get("sam2.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() }, 

        function (results_obtained) {

            $('<tr><td>Rank</td>' +
            '<td>Country Name</td>' +
            '<td>Gold</td>' +
            '<td>Silver</td>' +
            '<td>Bronze</td>' +
            '<td>Total</td></tr>').appendTo('#results_table');

            for (var i = 0; i <= results_obtained.length; i++) {
                $('<tr><td>' + (i+1) + '</td>' + 
                '<td>' + results_obtained[i].country_name + '</td>' +
                '<td>' + results_obtained[i].gold + '</td>' +
                '<td>' + results_obtained[i].silver + '</td>' +
                '<td>' + results_obtained[i].bronze + '</td>' +
                '<td>' + results_obtained[i].total + '</td></tr>').appendTo('#results_table');              
            }   
        },'json');

        $('</table>').appendTo('#medal_table');
        }

        function display_cyclist_results_table() {
            $("cyclist_table").empty();
            $('<table id = "cyclist_results_table">').appendTo('#cyclist_table');
            $.get("sam3.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() }, 

        function (cyclist_results_obtained) {

            $('<tr><td>Name</td></tr>').appendTo('#cyclist_results_table');

            for (var j = 0; j <= cyclist_results_obtained.length; j++) {
                $('<tr><td>' + cyclist_results_obtained[j].iso_id + '</td>' +
                '<td>' + cyclist_results_obtained[j].name + '</td></tr>').appendTo('#cyclist_results_table');
            }

        },'json');

        $('</table>').appendTo('#cyclist_table');
        }

    </script>
    <title>sam.php</title>
</head>
<body>
    <form name="form">
        <table>
            <tr><td><input name="Country_1" id="Country_1" value="GBR" type="text"></td></tr>
            <tr><td><input name="Country_2" id="Country_2" value="USA" type="text"></td></tr>
            <tr><td><input type="button" value="Medal Comparison" onClick="display_results_table()"/></td>
                <td><input type="button" value="Cyclist Comparison" onClick="display_cyclist_results_table()"/></td></tr>
        </table>
    </form>
    <div id="medal_table"></div>
    <div id="cyclist_table"></div>

</body>

Answer 1

on()新按鈕（或所需的任何元素click()上使用on()或click()函數：

$('#button').click(function() {
   functionOne();
   functionTwo();
});

Answer 2

包裝成一個函數

function call_everybody(){
    display_results_table();
    display_cyclist_results_table();
}

所以你的按鈕只需要這個

<input type="button" value="Cyclist Comparison" onclick="call_everybody()"/>

Answer 3

使用jQuery處理程序，而不是內聯onclick處理程序：

$('#button').click(function() {
    display_results_table();
    display_cyclist_results_table();
});

內聯處理程序沒有充分的理由將事件注冊與事件處理程序分開。 這更容易維護。

這僅需要一種識別按鈕的方法（例如，添加了ID的按鈕）：

<input id="button1" type="button" value="Medal Comparison" />

兩個單獨的函數，但是我希望它們同時被初始化

問題描述

3 個解決方案

解決方案1
2 2015-04-21 11:23:27

解決方案2
1 已采納 2015-04-21 11:25:56

解決方案3
1 2015-04-21 11:31:47

兩個單獨的函數，但是我希望它們同時被初始化

問題描述

3 個解決方案

解決方案1 2 2015-04-21 11:23:27

解決方案2 1 已采納 2015-04-21 11:25:56

解決方案3 1 2015-04-21 11:31:47

解決方案1
2 2015-04-21 11:23:27

解決方案2
1 已采納 2015-04-21 11:25:56

解決方案3
1 2015-04-21 11:31:47