获取隐藏文本字段与url更新图像悬停jQuery

Question

我正在测试一些jQuery，并希望在将鼠标悬停在特定的div或链接块上时更新图像。

所以我想做的是当悬停在。test-block上获得隐藏文本的url和更新。large-image-2。它似乎不能得到特定的文本悬停

这是我想出来的代码:

$('.test-block').on('onmouseenter', function() {
let myUrl = $(this).find('.display-hidden').text();
$('.url').text(myUrl);
});

我在这个页面上测试:https://jquery-testing.webflow.io/update-image三个底部的div和底部的图片在右边是我想使用的。

提前感谢!

Answer 1

您的示例存在一些问题。主要是注册事件处理程序的方式。

对于jQuery，正确的方法是$(target).on('mouseenter')-提交on...部分，当你想通过jQuery注册时。

我可能会以一种不那么具体的方式实现你正在寻找的功能，并使用更简单的句柄，如以下:

$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this)
const target = that.data('image-target')
const url = that.data('image-url')
$(target).attr('src', url);
})
divs.first().trigger('mouseenter')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=one">
Hover One
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=two">
Hover Two
</div>
<div
data-image-target="#my-target-image"
data-image-url="https://dummyimage.com/600x400/000/fff&text=three">
Hover Three
</div>
<img id="my-target-image">

解释:

数据属性:

在我的例子中使用了两个数据属性:data-image-target和data-image-url。

在您希望触发事件的元素上使用数据属性将使您的脚本更健壮，更不容易出错，因为事件注册绑定到使用jQuery选择器$([data-image-target][data-image-url])的属性选择器而不是任意的类名和/或id的两个属性。

data-image-target应该有一个CSS选择器，指向你想要切换src url的<img>元素，而data-image-url应该保存你想要切换到的图像的url。

上面的代码甚至可以取代你现有的功能在你的页面上的前3个图像。

Answer 2

代码正常运行

$(function () {
let divs = $('[data-image-target][data-image-url]');
divs.on('mouseenter', function () {
let that = $(this);
const target = that.data('image-target');
const url = that.data('image-url');
$(target).attr('src', url);
});
});

感谢Morten的提供。使用Webflow时，我还必须使用Command + Shift + O来关闭对图像的响应。(当在图像设置时)

属性:名称:data-image-target值:# my-target-image和名称:data-image-url值:(图像url，在我的情况下Webflow: https://uploads-ssl.webflow.com/something)

名称:id价值:my-target-image这个给image元素来显示图像。(如果Webflow;"my-target-image"在元素设置的ID字段中。