0

我正在尝试在内部表单上使用 jQuery 总表单数据。我在 jsfiddle.net 上使用了当前代码，并且它在 jQuery 1.6.4 上运行。

我尝试了多个不同的 jQuery 版本。但是我一般来说是 jQuery/javascript 的新手，所以我不知道从哪里开始。

任何帮助将非常感激！

<script type="text/javascript" src="jquery-1.6.4.js">
    var $form = $('#apple-order'),
        $summands = $form.find('.apple'),
        $sumDisplay = $('#total');

    $form.delegate('.apple', 'change', function ()
    {
        var sum = 0;
        $summands.each(function ()
        {
            var value = Number($(this).val());
            if (!isNaN(value)) sum += value;
        });

        $sumDisplay.text(sum);
    });
</script>


<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" id="apple-order">
    <tr>
        <td>
            <form name="apple" method="post" action="insert.php">

                <tr>
                    <td colspan="3" align="center"><strong>Caramel Apple Order Form</strong></td>
                </tr>

                <tr>
                    <td>Employee Name</td>
                    <td>: </td>
                    <td><input name="name" type="text"></td>
                </tr>

                <tr>
                    <td>Plain Caramel Apple</td>
                    <td>: </td>
                    <td><input name="plain" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Snickers</td>
                    <td>: </td>
                    <td><input name="snickers" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Butterfinger</td>
                    <td>: </td>
                    <td><input name="butter" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Mini M&Ms</td>
                    <td>: </td>
                    <td><input name="mini" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td>w/ Pretzels</td>
                    <td>: </td>
                    <td><input name="pretzel" type="text" class="apple"></td>
                </tr>

                <tr>
                    <td colspan="3" align="center"><strong>Apples w/ Toppings come with Chocolate Drizzle</strong></td>
                </tr>

                <tr>
                    <td colspan="3" align="center">Total: <span id="total"></span></td>
                </tr>

                 <tr>
                    <td colspan="3" align="center"><input type="submit" value="SUBMIT">    </td>
                </tr>


    </tr>
</table>
4

4 回答 4

4

您的<script>标签布局不正确。您需要将加载外部库的标签与内联脚本分开，如下所示。在声明 HTML 之后，您还应该在页面底部加载 Javascript。

<script type="text/javascript" src="jquery-1.6.4.js"></script>

<script>
var $form = $('#apple-order'),
    $summands = $form.find('.apple'),
    $sumDisplay = $('#total');

$form.delegate('.apple', 'change', function ()
{
    var sum = 0;
    $summands.each(function ()
    {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});
</script>
于 2013-10-15T20:46:13.683 回答
2

您正试图在元素存在之前访问它们。将您的代码包装在 DOM 就绪处理程序中。此外，如果您有一个script具有属性的元素src，则不能将代码放入其中。你需要两个script标签：

<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script>
$(function () {
    var $form = $('#apple-order'),

    // etc

});
</script>

默认情况下，jsfiddle 将您的代码包装在 onLoad 处理程序中，这可能会造成混淆。

于 2013-10-15T20:44:44.800 回答
0

首先声明所有库

<script type="text/javascript" language="javascript" src="jquery-1.6.4.js"></script>
...

然后在另一个地方开始编码

<script>
// do something
</script>
于 2013-10-15T20:49:04.460 回答
0

我认为问题在于您实际上并没有导入 jQuery。尝试在脚本之前添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这将从 Google 的 CDN 下载 jQuery。

于 2013-10-15T20:50:41.990 回答