在 Javascript 中创建一个基于 php 变量的循环

Creating a loop in Javascript based on php variable

本文关键字：php 变量 循环 一个 Javascript 创建      更新时间：2023-09-26

假设我有以下脚本，计算总和。

这是代码：

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script language="javascript" type="text/javascript">
    function updatesum() {
    line1 = ((document.form.price_1.value -0) * (document.form.number_1.value -0));
    line2 = ((document.form.price_2.value -0) * (document.form.number_2.value -0));
    line3 = ((document.form.price_3.value -0) * (document.form.number_3.value -0));
    line4 = ((document.form.price_4.value -0) * (document.form.number_4.value -0));
    line5 = ((document.form.price_5.value -0) * (document.form.number_5.value -0));
    document.form.sum.value = line1 + line2 + line3 + line4 + line5;
    }
    </script>
    </head>        
    <body>
    <?php
$tR = 1;
$maxlines = 5;
echo '<form name="form" method="post" action="action.php">';
echo '<table><tbody>';
while($tR <= $maxlines)
{
echo '<tr>';
echo '<td width="1"><input name="price_' . $tR . '" onChange="updatesum();"         type="text"></td>';
echo '<td width="1"> x </td>';
echo '<td width="1"><input name="number_' . $tR . '" onChange="updatesum();"         type="text" value="1"></td>';
echo '</tr>';
++$tR;
}
echo '</tbody></table>';
echo 'Total: <input name="sum" value="0" type="text" readonly="readonly">';
echo '<button type="submit" name="Submit" style="display: hidden;">Submit</button>';
echo '</form>';
    ?>
    </body>
    </html>

没关系...但是现在我将变量$maxlines从 5 更改为 500...如何调整Javascript，而不必编写类似以下内容的内容：

function updatesum() {
line1 = ((document.form.price_1.value -0) * (document.form.number_1.value -0));
line2 = ((document.form.price_2.value -0) * (document.form.number_2.value -0));
line3 = ((document.form.price_3.value -0) * (document.form.number_3.value -0));
line4 = ((document.form.price_4.value -0) * (document.form.number_4.value -0));
line5 = ((document.form.price_5.value -0) * (document.form.number_5.value -0));
line6 = ((document.form.price_6.value -0) * (document.form.number_6.value -0));
  .......................
line500 = ((document.form.price_500.value -0) * (document.form.number_500.value -0));
document.form.sum.value = line1 + line2 + line3 + line4 + line5 + line6 ........... + line500;
}

您可以使用循环遍历所有字段：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script language="javascript" type="text/javascript">
        function updatesum() {
            var prices = document.getElementsByName('price');
            var numbers = document.getElementsByName('number');
            var sum = 0;
            for (var i = 0; i < prices.length; i++) {
                sum += prices[i].value * numbers[i].value;
            }
            document.form.sum.value = sum;
        }
        </script>
    </head>        
    <body>
        <?php
            $tR = 1;
            $maxlines = 50;
            echo '<form name="form" method="post" action="action.php">';
            echo '<table><tbody>';
            while($tR <= $maxlines)
            {
                echo '<tr>';
                echo '<td width="1"><input name="price" onChange="updatesum();"         type="text"></td>';
                echo '<td width="1"> x </td>';
                echo '<td width="1"><input name="number" onChange="updatesum();"         type="text" value="1"></td>';
                echo '</tr>';
                ++$tR;
            }
            echo '</tbody></table>';
            echo 'Total: <input name="sum" value="0" type="text" readonly="readonly">';
            echo '<button type="submit" name="Submit" style="display: hidden;">Submit</button>';
            echo '</form>';
        ?>
    </body>
</html>

你可以轻松地将php变量转移到javascript，就像这样 

<script>
var maxlines = <?php echo $maxLines?>;
</script>

你现在有一个 javascript 变量 maxlines 等于你的 php 变量另外，请记住，如果您要传输字符串以将其放在引号中

<script>
var myString = '<?php echo $myString?>';
</script>

简短的版本是更新脚本并在那里有一个循环来完成所有这些操作。

但是（而且是一个巨大的，但那是）

除了解决方案本身之外，还可以在脚本中改进一些内容。您可以尝试其他方法解决问题：

  • 您不必将函数单独绑定到每个输入更改元素，并且在 HTML 中使用onchange属性是一种有点过时的方法。
  • 您不必定义每一行。你可以用JavaScript把它们全部总结起来，而不知道你有多少个。
  • 我会将您的input元素重命名为name属性，您可以在 PHP 中使用，而无需事先知道它的大小。例如，如果您将属性的名称更改为 name="price[]" 和 name="number[]" ，您的值将神奇地作为 $_POST["price"] 和 $_POST["number"] 发送到您的 PHP 脚本。从那里，您可以动态地玩它。

现在来看一些真实的代码：

通过构建我所解释的 HTML，您最终会得到以下想法：

<form name="form">
<input type="text" name="price[]" value="1" /><input type="text" name="number[]" value="10" /><br />
<input type="text" name="price[]" value="2" /><input type="text" name="number[]" value="20" /><br />
<input type="text" name="price[]" value="3" /><input type="text" name="number[]" value="30" /><br />
<input type="text" name="price[]" value="4" /><input type="text" name="number[]" value="40" /><br />
<br /><input type="text" name="sum" value="0" id="sum" />
</form>

然后，按照我建议的事件绑定技术，你的JavaScript将被简化为这样的内容：

function updateSum() {
    var prices = document.getElementsByName("price[]");
    var numbers = document.getElementsByName("number[]");
    var sum = 0;
    for (var i=0; i < prices.length; i++) {
         sum += prices[i].value * numbers[i].value;
    }
    document.getElementById("sum").value = sum;
} 
var prices = document.getElementsByName("price[]");
var numbers = document.getElementsByName("number[]");
for (var i=0; i < prices.length; i++) {
    prices[i].addEventListener('change', updateSum, false);
    numbers[i].addEventListener('change', updateSum, false);
}

我创建了一个 jsFiddle （http://jsfiddle.net/nXqgW/2/） 来显示这段代码。

您可以像这样使用代码：

<script>
function updatesum() {
    <?php $lines = array() ?>
    <?php for($i = 0; $i < $count; $i++) : ?>
        line<?= $i ?> = ((document.form.price_<?= $i ?>.value -0) * (document.form.number_<?= $i ?>.value -0));
        <?php $lines[] = 'line' . $i;
    <?php endfor; ?>
    document.form.sum.value = <?= implode(' + ', $lines);
}
</script>

你需要用PHP输出javascript行，所以在PHP中，你有maxlines变量，你可以做一个循环，比如;

<script>
    ...
    <?php for($i = 0; $i < $maxlines; $i++) {
        //Output javascript line
        ?>
        line<?php echo $i; ?> = ((document.form.price_<?php echo $i; ?>.value -0) * (document.form.number_<?php echo $i; ?>.value -0));
    <?php
    } ?>
    document.form.sum.value = 0 <?php for($int i = 0; $i < $maxlines; $i++) {
        echo '+ line' . $i;
    } ?>
</script>

我还没有测试过这段代码，但它应该可以工作。

相关文章：