jQuery背景图像更改，需要帮助

jQuery Background Image change, help needed please

本文关键字：帮助 背景 图像 jQuery      更新时间：2023-11-07

好吧，我已经试着思考了大约一个半小时，做了多次搜索，但都无济于事。我必须这样做，所以我不能改变它的结构。

在管理面板中，我有一个div集（#background preview）

当选择选项更改（#pbi）时，它将更改（#background preview）的背景图像。

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

我会做一把小提琴，但它并没有太大帮助，因为我有很多功能。

这是我的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的val。我只是还没有走到这一步，所以任何帮助都会很好，否则我下一步就试着冲过去；）

----编辑----

这是我的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")'

您的字符串串联语法有点偏离

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

我的问题的答案是templateDir作为PHP脚本进行报告。。我不得不把变量放在管理面板的头部。

--最终结果——

jQuery:

jQuery(document).ready(function($){
    $( "#ptc" ).on('change', function() {
        $("#colour-preview").removeClass();
        $("#colour-preview").addClass($(this).val());
    });
    $( "#pbi" ).on('change', function() {
        $('#background-preview').css('background-image','url(' + templateDir + $(this).val());
    });
});

现在将脚本包含到标题中：

/* Add Scripts Into Admin Head
-----------------------------------------------------------------*/
function peridot_admin_head(){
    echo "<script> var templateDir = '";
    echo bloginfo("template_directory");
    echo "/images/backgrounds/'; </script>";
}
add_action('admin_head', 'peridot_admin_head');

它就像一个魅力，感谢大家的帮助。

相关文章：