Question

我已经用PHP和JS编写了一段时间，但我不经常这样做，所以我被一些应该简单的事情所困扰，但是它给了我适合的。我在这里找到的答案都没有解决问题。

当图像文件夹中存在名为[pagename] 1,2,3 ... png的多个图像时，我将JS幻灯片代码插入到WordPress页面中。我一直在努力让代码读取文件夹，现在确实如此。但JS幻灯片放映并未在＆＃34;菜单＆＃34;页面，而完全相同的代码正在＆＃34; Home＆＃34;页。两者之间的唯一区别是菜单代码测试图像文件夹中是否存在图像。（他们是。）

我觉得这个代码的第一部分是正确的。第二段代码就是问题所在。为什么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/

Answer 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>";

使用"回显时，php会解析所有$var ...

因此变量$active和$next正在从php中回显，它看起来并不像你在代码中的任何地方设置的那样。解决方案是将变量名称从$active更改为active，或使用单引号'而不是双引号"

Answer 2

使用单引号（'）将告诉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>';

Answer 3

你的代码很乱，我已经重写了你的代码，可能更干净。既然你的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 -->

应该很简单（但它不是）：PHP中的Javascript片段

3 个答案: