在 Javascript 中插入高级自定义字段答案

【问题标题】：Inserting Advance Custom Fields in Javascript在 Javascript 中插入高级自定义字段
【发布时间】：2015-05-02 08:38:49
【问题描述】：

我有一个名为 smart screen-front.php 的文件。在这个文件中，我试图在一些 javascript 中输出一些 php 变量：

<?php
header("Content-type: text/javascript"); // This bit must come first!
?>
<?php $ssimage1 = get_field('smartscreen_slider_image_1'); ?>
<?php $ssimage2 = get_field('smartscreen_slider_image_2'); ?>
<?php $ssimage3 = get_field('smartscreen_slider_image_3'); ?>
<?php $ssimage4 = get_field('smartscreen_slider_image_4'); ?>
<?php $ssimage5 = get_field('smartscreen_slider_image_5'); ?>
<?php $ssimage6 = get_field('smartscreen_slider_image_6'); ?>
<?php $ssimage7 = get_field('smartscreen_slider_image_7'); ?>
<script type="text/javascript">
 jQuery(document).ready(function () {

            jQuery.supersized({

                // Functionality
                slide_interval          :   10000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,
                keyboard_nav            :   1,

                // Speed of transition

                // Components
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [           // Slideshow Images
                    {image : <?php echo $ssimage1; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''} ,
                    {image : <?php echo $ssimage2; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>', thumb : '', url : ''} ,
                    {image : <?php echo $ssimage3; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>', thumb : '', url : ''} ,
                    {image : <?php echo $ssimage4; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''} ,
                    {image : <?php echo $ssimage5; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''},
                    {image : <?php echo $ssimage6; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''} ,
                    {image : <?php echo $ssimage7; ?>, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''}

                    ]
            });
        }

);
</script>

这不是输出 php 变量。我究竟做错了什么。

【问题讨论】：

如果您只是尝试将这些变量输出到<div/> 会发生什么？是否有人居住？
您的 get_field() 函数是否正常工作？

标签： javascript php advanced-custom-fields

【解决方案1】：

看来您可能需要将 javascript 中的 <?php echo ...; ?> 语句用引号括起来：

'<?php echo ...; ?>'

或

"<?php echo ...; ?>"

就目前而言，假设每个$ssimageX 都包含一个类似于"X.jpg" 的字符串，那么javascript 最终看起来就像

{image : X.jpg, title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''}

除非定义了X，否则这将导致ReferenceError，如果网址中包含/，则可能是SyntaxError。

我猜你想让它看起来更像

{image : 'X.jpg', title : '<div class="slider-caption"><h2></h2><p></p></div>',  thumb : '', url : ''}

【讨论】：