显示/隐藏复制div的鼠标悬停/鼠标悬停上的指定文本的div

我有一张从一个div逐字复制到另一个div的表格。我这样做，以便我可以有一个固定的表头与一个可滚动的主体。第一个div id为#headdiv和第二个div类是.bodydiv，以及#headdiv内容复制到.bodydiv使用此项功能：显示/隐藏复制div的鼠标悬停/鼠标悬停上的指定文本的div

$('.bodydiv').html($('#headdiv').html());

然后我修改了两个div的显示/可见性，使他们看起来像一张桌子。看到这里的HTML和CSS：http://jsfiddle.net/jbswetnam/KNnAd/5/

现在，我想要做的是当用户悬停在表中的单元格时，使一些帮助文本出现。我可以使用元素的ID的以下功能做到这一点：

//Copied and modified from https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures 

function showInfo(info, display) { 
    document.getElementById('infoBox').innerHTML = info; 
    document.getElementById('infoBox').style.display = display; 
} 

function makeInfoCallback(info, display) { 
    return function() { 
    showInfo(info, display); 
    }; 
} 

function setupInfo() { 
    var infoText = [ 
     {'id': 'header', 'info': 'Header Row'}, 
     {'id': 'alpha', 'info': 'Alpha'} 
     ]; 

    for (var i = 0; i < infoText.length; i++) { 
    var item = infoText[i]; 
    document.getElementById(item.id).onmouseover = 
     makeInfoCallback(item.info, ""); 
    document.getElementById(item.id).onmouseout = 
     makeInfoCallback("", "none"); 
    } 
} 
setupInfo();

正如你可以看到http://jsfiddle.net/jbswetnam/KNnAd/5/，当你将鼠标悬停在表头，文本“标题行”出现。我试图做的是当你将鼠标悬停在说“Alpha”的单元格上时，使文本“Alpha”出现。

我知道为什么该函数在标题而不是正文中起作用。标题有一个在上面的函数中引用的id，而您看到的主体单元格是从#headdiv复制的，因此它们的id无效。但是我对Javascript知之甚少，无法知道如何解决这个问题。使用类而不是id的不起作用。我有一种感觉，我可以使用this重构整个脚本，也许可以从每个单元格中调用该函数，但我不知道该怎么做。

任何帮助，将不胜感激！

来源

2013-03-25 grandinero

得到它，此代码完成的：

function makeInfo() { 
$('.info').hover(
    function() { 
     $('#infoBox').html($(this).attr('info')); 
     $('#infoBox').css('display', ''); 
    }, 
    function() { 
     $('#infoBox').css('display', 'none'); 
    }); 
} 

makeInfo();

您可以在同一的jsfiddle查看更新的HTML。

来源

2013-03-26 00:45:14 grandinero

显示/隐藏复制div的鼠标悬停/鼠标悬停上的指定文本的div

回答

相关问题