0

我的目标是当鼠标指针在图像上时（我们称之为“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 值的更改是以不同的方式进行的。我试图调查，但我什么也没找到。：/

4

4 回答 4

3

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

示例

于 2013-09-04T14:33:55.087 回答
0

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(''); 
  });
});
于 2013-09-04T14:36:59.303 回答
0

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);
    });
});
于 2013-09-04T14:41:45.303 回答
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();
于 2013-09-04T14:43:49.843 回答