javascript - jQuery 背景图片更改,需要帮助

标签 javascript jquery html css

好吧,我已经花了大约一个半小时来思考这个问题,进行了多次搜索,但没有任何结果。我必须这样做,所以我不能改变它的结构。

在管理面板中,我有一个 div 集(#background-preview)

当选择选项改变(#pbi)时,它会改变(#background-preview)的背景图像。

我不习惯 jQuery 中的 vars,这是我目前最主要的问题。

我会做一个 fiddle ,但它并没有太大帮助,因为我有很多功能。

这是我的 jQuery 代码:

$( "#pbi" ).on('change', function() {
    var templateDir = '<?php bloginfo("template_directory"); ?>';
    $('#background-preview').css('background-image','url(templateDir + "/images/logo.png")');
});

如果我从 .css 区域中删除 tempateDir,那么它就可以工作了。它只是不能与 templateDir 一起工作,这真的让我很烦!我就是无法理解它。

然后最重要的是..最后看起来像这样

templateDir + '/images/backgrounds/' $(this).val() <-- #pbi 的值。我只是还没有做到这一点,所以任何帮助都会很好,或者我接下来会尝试那个冲刺;)

----编辑----

这是我的 PHP/HTML

<div id="background-preview" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/backgrounds/<?php echo get_option('peridot_background_image'); ?>');">
    <select name="peridot_background_image" id="pbi">
        <?php peridot_background_images(); ?>
    </select>
</div>

最佳答案

您正在使用 templateDir 作为文字字符串。试试这个

'url("' + templateDir + '/images/logo.png")'

关于javascript - jQuery 背景图片更改,需要帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20215674/

相关文章:

javascript - 如何将元素移动到另一个元素然后自动完成一些div

jquery - Rails JavaScript 仅在刷新页面时加载,而不是在原始页面加载时加载,这是怎么回事?

html - Flexbox 对齐 self :flex-start/end is adjusting horizontally not vertically

javascript - 响应式设计 : switching order of Div's

Javascript Window.Onload 函数链接

javascript - JS 网站从打开页面开始计数的倒计时器

javascript - 隐藏URL参数并读取它们

html - 为什么没有出现

javascript - 如何将 Webpack 4 插件转换为 Webpack 5

javascript - 使用 HTML、CSS 和 JS 构建桌面应用程序的替代方案