[英]Getting hidden text field with url to update image on hover jQuery
I'm testing out some jQuery and want to update a image when hovering over a specific div or link block.我正在测试一些 jQuery,并希望在将鼠标悬停在特定 div 或链接块上时更新图像。
So what i was trying to do is when hovering over .test-block get the hidden text with the url and update it on .large-image-2.所以我想做的是当悬停在 .test-block 上时,获取带有 url 的隐藏文本并在 .large-image-2 上更新它。 It can't seem to get the specific text on hover.似乎无法在悬停时获得特定文本。
This is the code i have come up with:这是我想出的代码:
$('.test-block').on('onmouseenter', function() {
let myUrl = $(this).find('.display-hidden').text();
$('.url').text(myUrl);
});
Im testing on this page: https://jquery-testing.webflow.io/update-image the three bottom div's and bottom picture on right is what i want to use.我在此页面上进行测试: https ://jquery-testing.webflow.io/update-image 三个底部 div 和右侧底部图片是我想要使用的。
Thanks in advance!提前致谢!
There are a few issues with your example.您的示例存在一些问题。 Mainly the way you register the event handler.主要是你注册事件处理程序的方式。
For jQuery the correct way would be $(target).on('mouseenter')
- Ommit the on...
part for the event you want to register when doing it through jQuery.对于 jQuery,正确的方法是$(target).on('mouseenter')
- 在通过 jQuery 进行操作时,省略要注册的事件的on...
部分。
I would probably implement the functionality you're looking for in a less specific way and with simpler handles like the following:我可能会以一种不太具体的方式和更简单的句柄来实现您正在寻找的功能,如下所示:
$(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">
Two data attributes are getting used in my example: data-image-target
and data-image-url
.在我的示例中使用了两个数据属性: data-image-target
和data-image-url
。
Using data attributes on the elements you want the event to be fired on will make your script a bit more robust and less prone to errors, since the event registration is bound to the two attributes being present using attribute selectors for the jQuery selector $([data-image-target][data-image-url])
instead of arbitrary classnames and/or ids.在您希望触发事件的元素上使用数据属性将使您的脚本更加健壮且不易出错,因为事件注册绑定到使用 jQuery 选择器的属性选择器$([data-image-target][data-image-url])
而不是任意的类名和/或 id。
The data-image-target
should have a CSS selector that points to the <img>
element(s) you wish to switch the src url on, while the data-image-url
should hold the url of the image you want to switch to. data-image-target
应该有一个 CSS 选择器,指向您希望打开 src url 的<img>
元素,而data-image-url
应该包含您要切换到的图像的 url .
The code above could even replace your existing functionality for the top 3 images on your page.上面的代码甚至可以替换页面上前 3 个图像的现有功能。
This code worked此代码有效
$(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);
});
});
Thanks to Morten for providing.感谢 Morten 提供。 With Webflow i also had to do Command + Shift + O to turn off responsiveness to the image.使用 Webflow,我还必须使用 Command + Shift + O 来关闭对图像的响应。 (when on image settings) (在图像设置上时)
Attributes: Name: data-image-target Value: #my-target-image And Name: data-image-url Value: (image url, in my case Webflow: https://uploads-ssl.webflow.com/something ) These two attributes to each hover element.属性: 名称:data-image-target 值:#my-target-image 和名称:data-image-url 值:(图像 url,在我的情况下 Webflow: https ://uploads-ssl.webflow.com/something )每个悬停元素的这两个属性。
Name: id Value: my-target-image This to the image element to show images.名称:id 值:my-target-image 这个给图像元素显示图像。 (if Webflow; "my-target-image" goes in the ID field in element settings. (如果 Webflow;“my-target-image”进入元素设置的 ID 字段。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.