图像不替换为 jQuery [Elementor]答案

【问题标题】：Image not replacing with jQuery [Elementor]图像不替换为 jQuery [Elementor]
【发布时间】：2021-06-29 17:27:57
【问题描述】：

（第一次发帖栈溢出，不知道这个格式对不对）

有人知道如何在悬停时使用 jQuery 更改元素或图像吗？

到目前为止，我有这个：

jQuery(document).ready(function($){
$('.yellow-button').on({
     'mouseenter': function(){
         $('#change-image img').attr("src","/wp-content/uploads/2020/11/random.jpg");
     }
 });
});

我用 show()/hide() 测试了选择器，它似乎工作（它出现和消失）。这是它的代码：

$('.yellow-button').on({
     'mouseenter': function(){
         $('#change-image img').hide();

由于它有效，我认为主要问题是这里的 attr() 位：

$('#change-image img').attr("src","/wp-content/uploads/2020/11/random.jpg")

到目前为止，对于 attr 中的两个变量，我尝试了完整的域链接 ' 和 " 的随机组合，但似乎都不起作用。

有什么线索可以做什么吗？谢谢！

我不确定这是否有帮助，但这是图像位的 HTML：

<div class="elementor-element elementor-element-383b78f elementor-widget elementor-widget-image" data-id="383b78f" data-element_type="widget" id="change-image" data-widget_type="image.default">
                <div class="elementor-widget-container">
                                <div class="elementor-image">
                                                <img width="900" height="300" src="http://somewebsite.com/wp-content/uploads/2020/08/lock-4.png" class="attachment-large size-large" alt="random" loading="lazy" srcset="http://somewebsite.com/wp-content/uploads/2020/08/lock-4.png 900w, http://somewebsite.com/wp-content/uploads/2020/08/lock-4-300x100.png 300w, http://somewebsite.com/wp-content/uploads/2020/08/lock-4-768x256.png 768w" sizes="(max-width: 900px) 100vw, 900px" />                                                        </div>
                        </div>
                </div>

【问题讨论】：

您是否尝试过使用浏览器的 devtools 来查看 src 属性是否真的在 Dom 中更新？
请提供minimal reproducible example。
“那是因为我用 show()/hide() 测试了选择器，当我将鼠标悬停在“黄色按钮”上时，图像确实消失/重新出现了。” 你能分享那个测试的代码？（请确保它确实有效）
@badsyntax 我对 devtools（或 jQuery 本身）不是很熟悉，但是 img 元素中的 src 属性正在更新。我里面有 srcset 但那没有更新。不确定这是否与它有关。
@KevinB 我已经在 cmets 中更新了它并确认它仍然有效。谢谢

标签： javascript jquery wordpress elementor

【解决方案1】：

对于所有使用 elementor 的人，答案如下：

$('.buttonClassName').on({
     'mouseenter': function(){
         $('#imageIDName img').attr("src","/wp-content/uploads/2020/11/random.jpg").removeAttr("srcset");
     }
 });
});

与引导/原始答案相比的主要区别如下：

在选择器中，在 #imageIDName 之后添加 img。
删除了 'srcset' 属性，我猜它与 'src' 冲突，所以新图像没有渲染。

我不确定这看起来如何响应，因为我只需要在桌面上使用它。

【讨论】：