jQuery 隐藏/显示函数会覆盖 html 内联样式背景图像吗？

Question

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

默认情况下，.concrete 在 CSS 中有 display: block ，而另一个 .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(); 
    });

Answer 1

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