从昨天开始,我一直在研究这个概念,并且已经能够想出一个初步的工作小提琴 - FIDDLE。
总体思路是:
将所有单词和相关描述符放在一个数组中。
动态显示单词。
将隐藏数据与动态显示的每个单词相关联。
当您将鼠标悬停在某个单词上时,相关数据(许多不同级别的描述符)会显示在您希望它们显示的任何位置。
JS
var mydata = [
['four', 'a number', 'four score = 80', 'total of 87 years'],
['score', 'a word', 'four score = 80', 'total of 87 years'],
['and', 'a word', '', 'total of 87 years'],
['seven', 'a number', '', 'total of 87 years'],
['years', 'a word', '', 'total of 87 years'],
['ago', 'a word', 'ago = in the past', '']
];
for(var v=0; v<6; v++)
{
$('.holder').append("<div class='num" + v + "'>" + mydata[v][0] + '-' + " </div>");
$(".num" + v).data( 'dataval1', mydata[v][1] );
$(".num" + v).data( 'dataval2', mydata[v][2] );
$(".num" + v).data( 'dataval3', mydata[v][3] );
}
$('.holder div').on('mouseenter', function(){
$('.putmehere').html(
$( this ).data('dataval1') + "<br />" +
$( this ).data('dataval2') + "<br />" +
$( this ).data('dataval3') + "<br />"
);
});
$('.holder div').on('mouseleave', function(){
$('.putmehere').html('');
});