我正在尝试使用 jQuery 来让我的网页显示来 self 的 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，甚至在导航栏上方。我也没有发现任何错误。
我还不是这些方面的专家，所以任何建议或建议的更改都将不胜感激!
最佳答案
您的代码应该可以工作，但有几处可能是错误的。为了更容易调试它，您可以像这样重构代码。并注意控制台注销的内容。
<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-value 正确指向您的主题文件夹。正如 TobiasM 在评论中提到的，get_template_directory_uri() 返回父主题。
如果值正确，但您看不到任何图像。确保当脚本运行时，带有 id #banner 的 div 可用。 例如，如果您在 head-tag 中运行脚本，它将在 div 进入 DOM 之前运行，因此当它运行 .appendTo() 时找不到目标。
通过在添加 DOM 后运行 Javascript(就在关闭 BODY 标签之前)或添加以下将在加载所有 DOM 内容后运行的回调来解决此问题。
$(document).on('ready', function() {
// code here
});
关于php - 使用 jQuery 在 WordPress 中拉取随机横幅图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56836268/