Getting hidden text field with url to update image on hover jQuery-CodePudding

I'm testing out some jQuery and want to update a image when hovering over a specific div or link block.

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. 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.

Thanks in advance!

CodePudding user response：

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.

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">

Explanation:

Data attributes:

Two data attributes are getting used in my example: data-image-target and 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.

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.

The code above could even replace your existing functionality for the top 3 images on your page.

CodePudding user response：

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. With Webflow i also had to do Command Shift O to turn off responsiveness to the image. (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.

Name: id Value: my-target-image This to the image element to show images. (if Webflow; "my-target-image" goes in the ID field in element settings.