Question

我正在尝试使用jQuery，以使我的网页显示images/banners/目录中选择池中的随机横幅图像。从我目前拥有的内容来看，该脚本不会从可能的选项中提取任何图像，并且由于某种原因还将我的页脚拖到页面顶部。该脚本应该将随机选择的图像附加到#banner div上，并使用CSS来实现。

我尝试更改文件路径，并把appendTo函数和实际CSS本身弄乱了。由于我是在WordPress主题中使用此脚本的，因此在上传主题后，需要使用带有get_template_directory_uri()函数的PHP代码才能正确地形成图像的路径。

以下是当前的脚本：

    <script>
        var images = ['shelbysquare1.png', 'test1.png', 'test2.png', 'lake.jpg', 'fields.png'];
        $('<img src="<?php echo get_template_directory_uri(); ?>/images/banners/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner');
    </script>

这是当前状态下的横幅ID：

#banner {
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: 100% 100%;
   background-position: top left;
   position: absolute;
   display: block;
   z-index: -2; }

我故意将z-index设置得较低，以使导航栏位于横幅上方，并且将位置设置为绝对值，以确保其始终位于页面的左上方。此外，图片的<div id="banner">标签位于<body>标签内，并且是导航栏上方的第一个div。我也不会说任何错误。

我还不是这些方面的专家，所以任何建议或建议的更改都将不胜感激！

Answer 1

您的代码应该可以使用，但是有些地方可能是错误的。为了简化调试，您可以像这样重构代码。并注意控制台注销的所有内容。

<script>
var images = [ 'shelbysquare1.png', 'test1.png', 'test2.png', 'lake.jpg', 'fields.png' ],
    randomImage = images[ Math.floor( Math.random() * images.length ) ],
    themePath = '<?php echo get_template_directory_uri(); ?>',
    fullPath = themePath + '/images/banners/' + randomImage;

var $img = $('<img/>', {
    src: fullPath
});

$img.appendTo('#banner');

console.log($img);
</script>

通过error.logging（或在浏览器开发人员工具中使用断点），您可以检查已声明的任何变量的值。

在上面的脚本中，我注销了我们刚创建的DOM对象。如果您使用的是Chrome，则控制台中的预期输出应如下所示：

a.fn.init [img, selector: "<img/>", context: {…}]
0: img
context: {src: "http://hostname.domain/wp- 
content/themes/themename/images/banners/test2.png"}
length: 1
selector: "<img/>"
__proto__: Object(0)

确保src值正确指向主题文件夹。正如TobiasM在评论中提到的，get_template_directory_uri（）返回父主题。

如果值正确，但是看不到任何图像。确保在脚本运行时，ID为#banner的div可用。例如，如果您在head-tag中运行脚本，则它将在div在DOM中之前运行，因此，当它运行.appendTo（）时，找不到目标。

通过在添加DOM后立即运行Javascript（在关闭BODY-tag之前）或添加以下将在所有DOM内容加载后运行的回调来解决此问题。

$(document).on('ready', function() {
    // code here
});

使用jQuery在WordPress中提取随机横幅图片

1 个答案: