0

我有一张从一个 div 逐字复制到另一个的表。我这样做是为了有一个带有可滚动正文的固定表头。第一个 div id 是#headdiv，第二个 div 类是.bodydiv，用这个函数#headdiv复制的内容：.bodydiv

$('.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，但我只是不知道该怎么做。

任何帮助，将不胜感激！

4

1 回答 1

0

用这段代码完成了它：

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

makeInfo();

您可以在同一个 jsfiddle 中看到更新后的 HTML。

于 2013-03-26T00:45:14.540 回答