jquery - jQuery隐藏/显示功能覆盖html内联样式背景图像?
问题描述
我的 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();
});
解决方案
我的错!ACF 图像字段返回图像对象(默认情况下),但我之前创建的第一个对象已更改为返回“图像 url”,因此它可以与内联背景图像样式一起使用。而且因为它们有错误的语法,所以在使用 DevTools 进行检查时,它只是覆盖了错误的行。
推荐阅读
- python - 在线程内更新 pyqtgraph BarGraphItem
- dns - 是否可以解析任何子域 DNS 请求(事先不知道)?
- powershell - 如何从 PowerShell 数据表中获取第一行
- vue.js - 单击“selectAll”时以及在选择任何过滤器之前如何显示所有产品?
- c# - 42P18: 无法确定参数 $12 的数据类型
- python - 如何将 pygame 安装到 pythonista 应用程序
- java - 如何使用 selenium 中的字段集中的图例定位单选按钮
- flutter - Flutter - 检查用户的输入是否是有效的颜色
- ios - 如何将触摸事件从页面视图控制器传递到容器控制器?
- docker - Docker 无法连接到本地主机