javascript .hover function issue

Question

i have this piece of code:

getOptionText: function(elem, value, config){
    var text = $(elem).innerHTML;
    var configType = this.getConfigValue(config, 'type', false);
    if (!configType) {
        return text;
    }
    switch (config.type) {
        case 'custom_images':
            var image = this.getConfigValue(config, 'images/' + value, false);
            if (image) {
                text = '<img class="mytest" src="' + image + '" alt="' + text +'" />';
                    jQuery(".mytest").hover(function(){
                        jQuery(this).addClass('big-red-box');

                    },function(){
                      jQuery(this).removeClass('big-red-box');});
            }
            break;

how I can add the image variable on hover? So all i want is when a customer put the mouse over the small images to display the full image.

Thank you

Edit:

    switch (config.type) {
        case 'custom_images':
            var image = this.getConfigValue(config, 'images/' + value, false);
            if (image) {
                text = '<img class="mytest" src="' + image + '" alt="' + text +'" />';
                 $img = $('<img class="mytest" src="' + image + '" alt="' + text + '" />');
                    $img.hover(function () {
                        jQuery(this).addClass('big-red-box');

                    }, function () {
                        jQuery(this).removeClass('big-red-box');
                    });
                jQuery("mytest").append(text);
            }
            break;

add your markup. Also, where is text defined? provide more details. — Aragorn
– Aragorn, Commented Nov 12, 2015 at 15:10

Diego · Accepted Answer · 2015-11-12 15:17:34Z

2

You are never adding the img you create to the DOM. So jQuery(".mytest") will never be able to select it. You need to create the jQuery objec with your html instead of just having the HTMLs text. To the jQuery objec you can bind the hover function.

Finally what you are missing is actually adding the element to the DOM.

var image = this.getConfigValue(config, 'images/' + value, false);
if (image) {
    $img = $('<img class="mytest" src="' + image + '" alt="' + text + '" />');
    $img.hover(function () {
        jQuery(this).addClass('big-red-box');

    }, function () {
        jQuery(this).removeClass('big-red-box');
    });
    // todo: append $img somewhere in the DOM
}

The simplest way to append the $img to the DOM would be:

$("#parentElementId").append($img);

You have a lot of other methods:

edited Nov 12, 2015 at 15:17

answered Nov 12, 2015 at 15:11

Diego

16.8k26 gold badges88 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

22 Comments

Robert Over a year ago

thank you Diego, i am not so good in Jquery, can you tell me or give an example how to append img in the dom?

Diego Over a year ago

You have a lot of different ways to append elements to the DOM. Here there are the most common: api.jquery.com/category/manipulation/dom-insertion-inside

Robert Over a year ago

so i can add this $("#parentElementId").append($img); in the $img.hover(function () {} ?

Diego Over a year ago

You should add it to the DOM outside the hover event (before or after binding it, its the same). If you want in the hover you could .show() it or .hide() it.

Robert Over a year ago

can you make this code to fit on my code? i have a lot of errors

|

Collectives™ on Stack Overflow

javascript .hover function issue

1 Answer 1

22 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

22 Comments

Your Answer

Sign up or log in

Post as a guest

Related