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

Question

我的目标是，当鼠标指针位于图像上(我们将其称为“IMAGEN”)时，文本将出现在屏幕的其他部分。

我试图通过在 HTML 中使用来做到这一点(假设 CSS 具有正确的代码，使 div(我们称之为“DESCRIPCION”)从一开始就消失了)

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

同时在 .js 文件中，如果我写:

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);
});
});

效果很好。浏览器上会出现“lalala 这是一些文本”文本。但显然我想使用更多的图像和更多的描述，但使用相同的 DIV。

所以我尝试将“var des = coop”放入 jQuery 函数中(这样我就可以每次对每个图像重复该代码)，但这不起作用。

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);
});
});

你能帮我解决这个问题吗？我假设 jQuery var 值更改是通过某种不同的方式进行的。我试图对此进行调查，但一无所获。 :/

Answer 1

一旦 document.write 执行，该代码就完成了。它不会根据 des 具有新值而更新。

您可以做的是使用$('#DESCRIPCION').text()重新分配它。第一个描述将被填充，但任何新数据都应使用 .text() 写入(引用 div 到目标)

<小时/>

进行一些更改以使其更加动态:

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

还有 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