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 this is some text”文本。但显然我想使用更多图像和更多描述但是相同的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

Answer 2

不需要

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

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

另一种方法，因为你有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();

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

4 个答案: