许多隐藏的 div 或替换单个 div 的内容？

Question

当用户将光标移动到我的页面上图像的不同区域时，我正在更新表格的内容，为他们提供更多详细信息。该表内容是服务器端生成的。

目前，我将大约 50 个不同的表格存储在它们自己的 div 中，这些表格在相应的鼠标悬停事件之前都是隐藏的。

这是实现这一目标的最佳方式吗？使用javascript来替换单个div的表格内容是否更好？

谢谢，A.

Answer 1

好吧，如果它是 50 个具有独特内容的相同表（结构方面），我可能会选择自定义对象或类似的东西，而不是隐藏 50 个表（50 个表 = 与 1 个表相比的开销）。

使用 jQuery 尝试以下（有点伪）：

var data_rows = $('#table').children('tr');
var region_information = { 
    0: { name: "Foo", location: "Loo"}, 
    1:{ name: "Bar", location: "Car" }, 
    2{ name: "Car", location: "Garage"} 
};

$('.regions').hover(
    function() {

        //Store the region for *performance*
        var this_region = $('this');        

        /* 
            Set the values in the table by getting the field corresponding to the substring
            The format = region-{n}, where {n} is a positive digit
            Repeat this `n` times, according to how many "values" you need to display per table
        */
        data_rows.children('field1').text(
            region_information[this_region.attr('name').substring(7, 1)]
        );
  }
);

这有意义吗？因为我不知道你的桌子是什么样子的，所以我不能完全告诉你该怎么做。不过，我可以为您提供类似伪代码（如上面的代码），所以我希望它可以帮助您！