我已经用PHP和JS编码了一段时间，但我不经常这样做，所以我被一些应该很简单的东西所吸引，但它给了我适合。我在这里找到的答案都没有解决这个问题。
我有JS幻灯片代码，当图像文件夹中存在多个名为[pagename]1,2,3...png的图像时，该代码入WordPress页面。 我一直在努力获取代码来读取文件夹，现在它做到了。 但是JS幻灯片在"菜单"页面上不起作用，而完全相同的代码在"主页"页面上工作。 两者之间的唯一区别是 Menu 代码测试图像文件夹中是否存在图像。 （他们是。
我觉得代码的第一部分是正确的。 第二段代码是问题所在。 为什么 JS 没有启动我的幻灯片？ 应该的。代码在页面上正确读取。
<?php
$uploads = wp_upload_dir();
$x = 1;
$poname = $post->post_name;
if ($dir = opendir('/home/rowlandwilliams/public_html/lepeep/wp-content/themes/twentythirteen-child/images')) {
$images = array();
while (false !== ($file = readdir($dir))) {
if ($file != "." && $file != "..") {
$images[] = $file;
asort($images);
}
}
closedir($dir);
}
这就是我认为问题所在：
foreach($images as $image) {
$subimg = substr($image, 0, -5);
if ($subimg == $poname) {
if ($x == 1) {
echo "<script type='text/javascript'>
function cycleImages(container) {
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
$(document).ready(function() {
setInterval(function(){cycleImages($('#page-cycler'))}, 2000);
})
}
</script>"; ?>
<div class="cycler" id="page-cycler">
<?php $actstat = 'class="active"'; ?>
<?php $x++; ?>
<?php } else { ?>
<?php $actstat = ''; ?>
<?php } ?>
<img <?php echo $actstat; ?> src="<?php bloginfo('stylesheet_directory'); ?>/images/<?php echo $image; ?>">
<?php } ?>
<?php } ?>
</div><!-- #page-cycler -->
http://rowlandwilliams.com/lepeep/menu/
这就是你的问题所在：
echo "<script type='text/javascript'>
function cycleImages(container) {
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
$(document).ready(function() {
setInterval(function(){cycleImages($('#page-cycler'))}, 2000);
})
}
</script>";
当你使用"回显时，php 会解析所有$var......
因此，变量 $active 和 $next 是从 php 回显的，这看起来不像是在代码中的任何位置设置的。解决方案要么是将变量名称从 $active 更改为 active，要么使用单引号'而不是双引号"
使用单引号 （'） 将告诉 PHP 不要解析 echo 中的任何变量，而使用双引号 （"） 将
。尝试使用 ' 引号，并将 JS 中的任何 ' 引号替换为 " 引号。
echo '<script type="text/javascript">
function cycleImages(container) {
var $active = container.find(".active");
var $next = ($active.next().length > 0) ? $active.next() : container.find("img:first");
$next.css("z-index",2);
$active.fadeOut(1500,function() {
$active.css("z-index",1).show().removeClass("active");
$next.css("z-index",3).addClass("active");
});
$(document).ready(function() {
setInterval(function(){cycleImages($("#page-cycler"))}, 2000);
})
}
</script>';
你的代码一团糟，我已经重写了你的代码，也许更干净。由于您的 javascript 中没有 php 代码，因此不要尝试使用 echo 它会使您的代码更加混乱，正如@Arian提到的，$active 和 $next 将作为 php 变量工作。
foreach($images as $image):
$subimg = substr($image, 0, -5);
if ($subimg == $poname):
if ($x == 1): ?>
<script type='text/javascript'>
function cycleImages(container) {
var $active = container.find('.active');
var $next = ($active.next().length > 0) ? $active.next() : container.find('img:first');
$next.css('z-index',2);
$active.fadeOut(1500,function() {
$active.css('z-index',1).show().removeClass('active');
$next.css('z-index',3).addClass('active');
});
$(document).ready(function() {
setInterval(function(){cycleImages($('#page-cycler'))}, 2000);
})
}
</script>
<div class="cycler" id="page-cycler">
<?php
$actstat = 'class="active"';
$x++;
else:
$actstat = '';
endif; ?>
<img <?= $actstat; ?> src="<?php bloginfo('stylesheet_directory'); ?>/images/<?= $image; ?>">
<?php endif; ?>
<?php endforeach; ?>
</div><!-- #page-cycler -->