Question

我正在处理一个JQuery问题，该问题从选择框（A，B，C和D）获取输入，并且每次提交＆＃39;单击按钮，它会在同一页面中显示一个表格，显示所有这些变量及其频率（计数）。

除了每次用户按下提交按钮时实际保存变量计数的部分外，我已设法完成所有操作。你可以看到我到目前为止所做的代码......

我是否必须在脚本文件中使用提交函数之外的数组来保存每个变量的计数。我希望有人能帮忙...... 提前谢谢！

HTML文件：

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="jquery.js"></script>
        <script src="Script.js"></script>
        <title>Grade Values</title>
    </head>
    <body> 
        <div id="gradesS">
        <form action="abcd.php">
            <select name="grades" id="grades">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
            <button type="submit">Submit</button>
        </form>
        </div>
        <div id="result"> </div>
    </body>
</html>

php文件：（abcd.php）

<?php
$A=0;
$B=0;
$C=0;
$D=0;
if($_REQUEST['grades']=="A"){
    $A++;
}
if($_REQUEST['grades']=="B"){
    $B++;
}
if($_REQUEST['grades']=="C"){
    $C++;
}
if($_REQUEST['grades']=="D"){
    $D++;
}
$output='';
$output.='<table border="1"><tr><td>Grades</td><td>Frequency</td>';
$output.='<tr><td> A</td><td>'.$A.'</td></tr>';
$output.='<tr><td> B</td><td>'.$B.'</td></tr>';
$output.='<tr><td> C</td><td>'.$C.'</td></tr>';
$output.='<tr><td> D</td><td>'.$D.'</td></tr>';
$output.='</table>';

echo($output);

?>

JavaScript文件（JQuery）：

$(document).ready(function () {
    $('#gradess').submit(function() {
         event.preventDefault();
         $.get('abcd.php', {'grades': $('#grades :selected').val()}, function(data) {
        $('#result').html(data);
    });
});
});

Answer 1

如果您不想使用DB，可以将计数器保存在window属性中，但如果刷新页面，计数器将丢失：

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <title>Grade Values</title>
        <script type="text/javascript">
            $(document).ready(function () {
                window.A = 0;
                window.B = 0;
                window.C = 0;
                window.D = 0;
            $("#gradess").on('click', function() {
                 var value = $('#grades :selected').val();
                 if(value == "A")      window.A++;
                 else if(value == "B") window.B++;
                 else if(value == "C") window.C++;
                 else if(value == "D") window.D++;

                 $("#A").html(window.A);
                 $("#B").html(window.B);
                 $("#C").html(window.C);
                 $("#D").html(window.D);
                 return false;
                });
            });
        </script>
    </head>
    <body> 
        <div id="gradesS">
            <select name="grades" id="grades">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
                <option value="D">D</option>
            </select>
            <button type="submit" id="gradess">Submit</button>
        </div>

            <div id="result">
                <table border="1"><tr><td>Grades</td><td>Frequency</td>
                    <tr><td> A</td><td id="A">0</td></tr>
                    <tr><td> B</td><td id="B">0</td></tr>
                    <tr><td> C</td><td id="C">0</td></tr>
                    <tr><td> D</td><td id="D">0</td></tr>
                </table>
        </div>
    </body>
</html>

使用JQuery保存每个变量的计数

1 个答案: