Question

我有一个在Wordpress上运行的Woocommerce商店。

我正在使用并且热衷于使用此选项的“受信任”主题中包含标题图像选项。它显示在每个页面上，但是，标题图像在所有页面上都是相同的。

我希望有一个默认图像显示在主页上以及未指定图像的任何页面上。

我可以使用Perfect Woocommerce品牌为Woocommerce上的每个类别页面和每个品牌页面指定图像，但是，这些图像显示在标题下方。

我很想知道是否有人知道如何使用JQuery实现我想要的东西。

当前，标题图片是使用CSS显示的

.main-header{
    background-image:url(https://example.com/imageurl)
}

类别/品牌图像通过HTML显示：

<div class="pwb-brand-banner pwb-clearfix">
    <img src="http://example.com/wp-content/uploads/2018/10/image.jpg" class="attachment-full size-full" alt="" srcset="http://example.com/wp-content/uploads/2018/10/image.jpg 1140w, http://example.com/wp-content/uploads/2018/10/image.jpg 300w, http://example.com/wp-content/uploads/2018/10/image.jpg 768w, http://example.com/wp-content/uploads/2018/10/image.jpg 1024w, http://example.com/wp-content/uploads/2018/10/image.jpg 600w, http://example.com/wp-content/uploads/2018/10/image.jpg 64w" sizes="(max-width: 1140px) 100vw, 1140px" width="1140" height="488">
</div>

因此，从本质上讲，我想覆盖设置标题图像并设置自己的默认图像的CSS，然后挂接到每个类别/品牌的已定义图像，并使用该图像替换默认图像，除非没有图像定义。

任何对此的帮助都会很棒。我可以进行网页设计，但是对JQuery还是新手，无法在线找到任何帮助

我发现的一件事看起来与我的需求相似（尽管我不确定如何使其适应我的需求）

$(document).ready(function(){
$("header").on({
    mouseenter: function(){
        $(this).css("background-image", "url('/css/images/css.jpg')");
        },   
    });    
});

这会更改鼠标图像，输入Im寻找某种东西：

If
    Image set via category/brand then use use set image
else
    use default ~ image $(this).css("background-image", "url('/css/images/css.jpg')");

Answer 1

if (window.location.pathname != "/"){ // if it is not default page, replace the main-image background image with the category/brand image
    $(".main-header").css("background-image", 'url('+$(".attachment-full size-full").attr('src')+')');          
    // then probably hide the category/brand image
}

使用jQuery设置页面特定的标题图像

1 个答案: