将文本字段值从 php 传递到 javascript答案

【问题标题】：Pass a textfield value from php to javascript将文本字段值从 php 传递到 javascript
【发布时间】：2017-04-26 11:36:15
【问题描述】：

我创建了一个字段来为 wordpress 后台的 highchart 选择标签，如下所示：

public static function sm_register_chart() {

    $charts = array();
    if( function_exists( 'wdt_get_all_charts_nonpaged')){
        foreach( wdt_get_all_charts_nonpaged() as $table ){

            $charts[$table['id']] = $table['title'];
        }
    }
    $captions = array();

    $fields = array(

        array(
            'label' => esc_html( 'Graphic' ),
            'description' => esc_html( 'Choose the graphic' ),
            'attr'    => 'chart',
            'type'    => 'select',
            'options' => $charts,
        ),
        array(
            'label' => esc_html( 'Footer label' ),
            'description' => esc_html( 'Choose the footer label' ),
            'attr' => 'footer_caption',
            'type' => 'text',
        ),

    );

我想将在footer_caption 中输入的任何内容传递给我从这个小提琴中获取的这个js：http://jsfiddle.net/abenrob/ur02w4j5/

    Highcharts.setOptions({
  chart: {
          type: 'column',
          events: {
              load: function () {
                  var label = this.renderer.label("This text will adjust to chart resizing " +
                      "and redraws and will be visible on exported images.")
                  .css({
                      width: '400px',
                      fontSize: '9px'
                  })
                  .attr({
                      'r': 2,
                      'padding': 5
                  })
                  .add();

                  label.align(Highcharts.extend(label.getBBox(), {
                      align: 'center',
                      x: 0, // offset
                      verticalAlign: 'bottom',
                      y: 0 // offset
                  }), null, 'spacingBox');

              }
          },
          marginBottom: 120
      },
      legend: {
        align: 'center',
        verticalAlign: 'bottom',
        y: -30
    },

所以我得到的不是var label = this.renderer.label("This text will adjust to chart resizing")，而是footer_caption。

我在想这样的事情：

var labelText = document.querySelectorAll('[footer_caption]').text()
var label = this.renderer.label(labelText)

但它不起作用，我什至无法从 footer_caption 获取我输入的值

【问题讨论】：

document.querySelectorAll('[footer_caption]') 是否返回任何内容？或者这是一个空数组？无论如何，应该有：document.querySelectorAll('[footer_caption]')[0].innerText; 但我担心[footer_caption] 是一个错误的选择器。如果您可以展示生成的 HTML 元素的外观，那么我将能够详细介绍它。
查看我的编辑，我显示完整的短代码选项，它是我设置 footer_caption 的地方
也许我应该换个方式问：footer_caption 是在您的网站上生成的（所以您有一个标签，例如：<div footer_caption></div>）还是只是 PHP 数组中的一个元素？跨度>
只是php数组中的一个元素
那么下面的答案不适合你吗？我不是 PHP 人，但我会使用：var label = this.renderer.label(<?php echo json_encode($fields[1]['description']); ?>;).

标签： javascript php wordpress highcharts label

【解决方案1】：

您可以通过执行以下操作来实现此目的；您可能需要根据自己的代码更改footer_caption 的标识符；

<script type="text/javascript">

var footer_caption = <?= json_encode($arr['footer_caption']); ?>; 

</script>

然后在javascript代码中需要的地方引用变量。

使用json_encode 可确保正确处理非法字符等。上面的代码使用了PHP快速标签，更多参考可以参考here。

【讨论】：

好吧，我很困惑。我是否在 js 文件中有 var footer_caption 然后执行： var label = this.renderer.label(footer_caption) ？
是的，将 var footer_caption = <?= json_encode($arr['footer_caption']); ?>; 与其他代码一起放入您的 javascript 文件中，然后您可以通过引用 javascript 变量 footer_caption 来使用该变量。您可能只需要更改 $arr['footer_caption'] 以便它确实指向您自己代码中的 PHP 变量。

【解决方案2】：

你可以使用 json_encode 来做到这一点

<script>
  var footer_caption = <?php echo json_encode($fields); ?>;
</script>

【讨论】：