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

How do I change a JavaScript variable value, inserted in a HTML document, using jQuery

本文关键字：文档 JavaScript 变量值 HTML 插入 何使用 jQuery      更新时间：2023-09-26

我的目标是当鼠标指针在图像上时（我们称之为"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);
});
});

这很好用。 在浏览器上出现"啦这是一些文本"文本。 但显然我想使用更多的图像和更多的描述，但相同的 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 值的更改是以不同的方式进行的。我试图调查一下，但我什么也没找到。:/

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

示例

不需要

document.write(des);

只需使用此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(''); 
  });
});

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

另一种方法，因为你有jQuery将是jQuery UI库中的工具提示小部件

http://jqueryui.com/tooltip/

然后 

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

而你的js就是

$(document).tooltip();
相关文章：