Question

我的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(); 
    });

Answer 1

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

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

1 个答案: