带有 PHP 元素的 JavaScript 中的动态循环变量答案

【问题标题】：Dynamic loop variable in JavaScript with PHP elements带有 PHP 元素的 JavaScript 中的动态循环变量
【发布时间】：2017-09-02 12:08:17
【问题描述】：

我正在使用一个名为 imagemapster 的 jquery 插件来创建一个包含 mysql / php 内容和值的地图。

地图上有 120 多个已定义区域，我想使用循环为每个弹出工具提示编写代码。虽然我可以在 JavaScript 中创建一个循环并替换纯文本，但我没有任何运气，包括 PHP 元素中的 JavaScript 变量 (i)。

我要替换的代码如下。我希望循环生成数字（1,2 和 3）的每个实例。 JavaScript 和 PHP 可以像这样混合使用吗？

<script>
$(document).ready(function ()
{

$('#shape1').mapster({
showToolTip: true,
toolTipContainer: '<div class="map_popup"></div>',
    fill : true, 
  areas:  [
          {                
           key: "1", 
           toolTip: "Controller 1<p>
                     Production <?php echo $SumOfSUP_AC_TODAY_1; ?> kWh<br>
                     Energy <?php echo $SumOfAC_P_1; ?> kW<br>",
                     },
           {                
           key: "2", 
           toolTip: "Controller 2<p>
                     Production <?php echo $SumOfAC_TODAY_2; ?> kWh<br>
                     Energy <?php echo $SumOfAC_P_2; ?> kW<br>",
                     },
           {                
           key: "3", 
           toolTip: "Controller 3<p>
                     Production <?php echo $SumOfSUP_AC_TODAY_3; ?> kWh<br>
                     Energy <?php echo $SumOfAC_P_3; ?> kW<br>",
                     }

           etc etc...

【问题讨论】：

PHP 在发送到浏览器之前会在你的服务器上运行..

标签： javascript php jquery for-loop imagemapster

【解决方案1】：

是的，这是可能的，但是 JavaScript 中不能有换行符。

在现代浏览器中，您可以使用反引号代替引号

toolTip: `Controller 1<p>
          Production <?php echo $SumOfSUP_AC_TODAY_1; ?> kWh<br>
          Energy <?php echo $SumOfAC_P_1; ?> kW<br>`

但为了兼容，请使用 \n 或不使用：

toolTip: "Controller 1<p>\nProduction <?php echo $SumOfSUP_AC_TODAY_1; ?> kWh<br>\nEnergy <?php echo $SumOfAC_P_1; ?> kW<br>"

你也可以在PHP中生成字符串：

How to handle newlines in Javascript? (from PHP)

【讨论】：

很高兴知道有关 java 中的单行。你知道如何在 php chevrons 中引用 java 变量吗？ for (i = 1; i < 3; i++) { toolTip: "Controller i<p>\nProduction <?php echo $SumOfSUP_AC_TODAY_i; ?> kWh<br>\nEnergy <?php echo $SumOfAC_P_i; ?> kW<br>" }