如何使用jQuery更改插入HTML文档中的JavaScript变量值

Question

My objective is that when the mouse pointer is on an image (we'll call it "IMAGEN"), a text would appear at some other part of the screen.

I'm trying to do this by using in the HTML (Assume that the CSS has the right code, making the div (we'll call it "DESCRIPCION") faded away from the start)

<div id="DESCRIPCION"> <script> document.write(des); </script></div>

meanwhile in the .js file, IF I write:

var coop = "lalala this is some text";
var des = coop;

// jQuery here. If I put the mouse over IMAGEN, DESCRIPCION fades in. 

$(document).ready(function(){
$("#IMAGEN").mouseenter(function(){
    $("#DESCRIPCION").fadeTo('fast',1.0); 
}); 
$("#IMAGEN").mouseleave(function(){
    $("#DESCRIPCION").fadeTo('fast',0);
});
});

That works just fine. and on the browsers appears the "lalala this is some text" text. But obviously I want to use more images and more descriptions BUT the same DIV.

So I tried putting the "var des = coop" inside the jQuery function (so I can repeat the code each time of each image), but this is not working.

var coop = "lalala this is some text";

// jQuery here. If I put the mouse over IMAGEN, DESCRIPCION fades in. 

$(document).ready(function(){
$("#IMAGEN").mouseenter(function(){
    var des = coop;
$("#DESCRIPCION").fadeTo('fast',1.0); 
}); 
$("#IMAGEN").mouseleave(function(){
    $("#DESCRIPCION").fadeTo('fast',0);
});
});

Can you please help me with this? I assumed the jQuery var value change is made some different way. I tried to look into that but I have found nothing. :/

Answer 1

Once document.write executes that code is finished. It isn't going to update based on des having a new value.

What you can do is reassign it using $('#DESCRIPCION').text() . The first description will be populated, but any new data should be written using .text() (referencing the div to target)

---

Changes around a bit to be more dynamic:

<img src="http://placehold.it/100&text=Image1" data-desc="Image 1 description" />
<img src="http://placehold.it/100&text=Image2" data-desc="Image 2 description" />
<img src="http://placehold.it/100&text=Image3" data-desc="Image 3 description" />
<img src="http://placehold.it/100&text=Image4" data-desc="Image 4 description" />
<div id="DESCRIPCION"></div>

And the JS:

$(function(){
    var $DESCRIPCION = $('#DESCRIPCION');
    $('img').hover(function(){
        var desc = $(this).data('desc');
        $DESCRIPCION.text(desc).fadeTo('fast', 1.0);
    },function(){
        $DESCRIPCION.fadeTo('fast', 0);
    });
});

Exmaple

Answer 2

No need for the

document.write(des);

Just use this jQuery.

 $(document).ready(function(){
   $("#IMAGEN").hover(function(){
      $("#DESCRIPCION").fadeTo('fast',1.0); 
      $("#DESCRIPCION").text('what you want to be displayed'); 
   }); 
   $("#IMAGEN").mouseout(function(){
      $("#DESCRIPCION").fadeTo('fast',0);
      $("#DESCRIPCION").text(''); 
  });
});

Answer 3

HTML:

<img class="IMAGEN" src="whatever" data-description="lalala this is some text" />
<img class="IMAGEN" src="whatever" data-description="some other text" />
<div id="DESCRIPCION"></div>

JS:

jQuery(function($){
    $(".IMAGEN").mouseenter(function(){
        $("#DESCRIPCION")
            .text( //change description
                $(this).data('description') //get value of data-description attribute
            )
            .stop(true,false) //stop current animation
            .fadeTo('fast',1.0);
    }).mouseleave(function(){
        $("#DESCRIPCION")
            .stop(true,false)
            .fadeTo('fast',0);
    });
});

Answer 4

Another way to do this, since you have jQuery would be the tooltip widget in the jQuery UI library

http://jqueryui.com/tooltip/

then

<img src="http://placehold.it/100&text=Image1" title="Image 1 description" />
<img src="http://placehold.it/100&text=Image2" title="Image 2 description" />
<img src="http://placehold.it/100&text=Image3" title="Image 3 description" />
<img src="http://placehold.it/100&text=Image4" title="Image 4 description" />

And your js is simply

$(document).tooltip();