Question

我有一张表从一个div逐字复制到另一个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重构整个脚本，也许可以从每个单元格中调用该函数，但我只是不知道该怎么做。

任何帮助将不胜感激！

Answer 1

完成此代码：

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

makeInfo();

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

在鼠标移除/鼠标移除复制的div时显示/隐藏带有指定文本的div

1 个答案: