在Jquery Slider中使用PHP选项

因此,我不确定是否遗漏了一些明显的内容. (我认为这可能与两种语言的不兼容有关,因为据我所知,PHP是在服务器上解释的？)…尽管我对PHP还是很陌生.

我在基于WordPress的自定义网站首页上使用了很棒的Jquery插件ResponsiveSlides.使用以下代码,效果很好：

$(".home-slides").responsiveSlides({
auto: true,
speed: 500,
pause: true,
timeout: 7000,
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});

但是,我希望能够允许客户端使用wordpress后端主页上的自定义字段来控制插件.这些自定义字段可以轻松调用并正确显示在警报中：

var speed = <?php echo the_field( "speed" ); ?>;
var timeout = <?php echo the_field( "timeout" ); ?>;

但是,如果我尝试将它们作为变量插入或直接使用上述PHP插入,那么我就没有运气了.我最接近的是：

$(".home-slides").responsiveSlides({
auto: true,
speed: <?php echo the_field( "speed" ); ?>,
pause: true,
timeout: <?php echo the_field( "timeout" ); ?>,
pager: true,
nav: true,
maxwidth: 1280,
namespace: "home-slides",
prevText: "",
nextText: "",
navContainer:".home-slides",
manualControls: "#home-tabs"
});

它可以在实时页面源中正确显示(即超时：7000等),但会中断滑块.反正有做这项工作吗？我想念什么吗？

谢谢你们！

编辑：

感谢Tom Kriek的建议,我可以正确地回应脚本.这会在实时页面源中生成正确的脚本,但是滑块仍然不起作用.但是,如果我将同一脚本从页面源复制到实际文件中并进行测试,则它可以完美地工作.由于某些原因,当PHP回显时,浏览器会忽略脚本.

解决方法:

echo '<script type="text/javascript">
    $(".home-slides").responsiveSlides({
    auto: true,
    speed: '. the_field("speed") .',
    pause: true,
    timeout: '. the_field("timeout") .',
    pager: true,
    nav: true,
    maxwidth: 1280,
    namespace: "home-slides",
    prevText: "",
    nextText: "",
    navContainer:".home-slides",
    manualControls: "#home-tabs"
});
</script>';

标签：responsive-design,wordpress,php,jquery
来源： https://codeday.me/bug/20191121/2050963.html