jQuery隐藏/显示功能覆盖html内联样式背景图像？

Posted 2023-03-25

【中文标题】jQuery隐藏/显示功能覆盖html内联样式背景图像？

【英文标题】：jQuery hide/show functions overwrite html inline style background image?

【发布时间】：2019-03-19 18:17:45

【问题描述】：

我的 hide()/show() 函数用 display: none/block 覆盖内联样式背景图像，但不知何故它不会覆盖第一个 (.concrete) .img 背景图像 html 元素。

默认情况下 .concrete 在 CSS 中具有 display: 块，而其他 .img 具有 display: none;

HTML：

<p class="slider-link concrete active"><?php the_field("product1"); ?></p>
<p class="slider-link light"><?php the_field("product2"); ?></p>

<div class="img concrete" style="background-image: url(<?php the_field('concrete_img'); ?>)">
    <div class="content">
        ...
    </div>
</div>
<div class="img light" style="background-image: url(<?php the_field('light_img'); ?>)">
    <div class="content">
        ...
    </div>
</div>

jQuery:

$('.slider-link').click(function() 
    $('.slider-link').removeClass('active');
    $(this).addClass('active');
    if ($(this).hasClass('concrete')) 
        $('.img').hide();
        $('.img.concrete').show();
     else if ($(this).hasClass('light')) 
        $('.img').hide();
        $('.img.light').show(); 
    );

【问题讨论】：

我怀疑显示/隐藏实际上会覆盖背景图像的内联样式。您的问题一定是其他问题，但是根据给定的问题描述和代码，很难判断可能是什么问题。请创建一个minimal reproducible example。

你需要在jquery中设置背景图片。不是内联样式。

【参考方案1】：

我的错！ ACF 图像字段返回图像对象（默认情况下），但我之前创建的第一个对象已更改为返回“图像 url”，因此它可以与内联背景图像样式一起使用。而且因为它们有错误的语法，所以在使用 DevTools 进行检查时，它只是覆盖了错误的行。