Question

我有这两个独立的功能，每个功能都由2个不同的输入按钮初始化，这些按钮用于传递两个不同的国家/地区名称，以便从SQL数据库创建2个国家/地区的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()功能：

$('#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 个答案: