Question

我建了一个约20个细胞的桌子。在表格旁边，我想显示一个带有描述的<div>，应该在悬停或点击时显示。网上有很多解决方案，但没有一个真正适合。

我已经知道我确实需要JavaScript，所以我有我的表格单元格

<td class="des1">Content</td>

和

<div id="des1">my Description1</div>

我在单元格中添加了一个类，因为有些描述是由多个单元格调用的。

所以，我需要一个JavaScript函数来显示div＆＃34; des1＆＃34;在悬停/单击类＆＃34; des1＆＃34;的所有单元格时，还会隐藏之前显示的所有其他说明。这就是我的问题。

我的所有描述都包含在其他div中，因此我可以隐藏包装中的所有div，然后显示正确的描述。执行此操作的最佳方法是什么（事件处理？内联？）我应该在添加中使用CSS吗？

我在Javascript方面没有太多经验，所以我很感激任何帮助或提示。

Answer 1

您要实现的目标有两个基本部分：

事件处理（响应用户悬停/点击的事情）
DOM操作（更改描述）。

我强烈建议您使用jQuery library来帮助实现这两个目标。

使用jQuery，您可以轻松地“绑定”一个事件处理程序，该处理程序将执行某些操作以响应单击或悬停的单元格。例如：

$('.des1').click(function() {
    // Whatever you put here will be triggered when the user clicks on an element
    // with class "des1"
});

悬停处理程序类似，虽然稍微复杂一些，因为它允许您指定用户开始悬停时和停止时发生的情况：

$('.des1').hover(function() {
    // Whatever you put here will be triggered when the user hovers over an element
    // with class "des1"
}, function() {
    // Whatever you put here will be triggered when the user stops hovering over an 
    // element with class "des1"
});

在处理程序内部，您需要添加逻辑以使用适当的ID修改元素的文本，您可以使用jQuery的text方法执行此操作：

$('#des1').text('My Description #1');

将两者结合起来，并在它们之间共享一个函数，你会得到类似的东西：

var showDescription1 = function() {
    // Whatever you put here will be triggered when the user clicks on an element
    // with class "des1"
};
$('.des1').click(showDescription1)
$('.des1').hover(showDescription1, function() {
     // if you want to change the description back when the user stops hovering, you'd
     // add that logic here
});

Answer 2

<style>
    div.des {
        display: none;
    }
</style>

<table>
    <tr>
        <td class="des1">Content 1</td>
    </tr>
    <tr>
        <td class="des2">Content 2</td>
    </tr>
    <tr>
        <td class="des3">Content 3</td>
    </tr>
</table>

<div id="des1" class="des">Description 1</div>
<div id="des2" class="des">Description 2</div>
<div id="des3" class="des">Description 3</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('table td').on('click', function() {
        var $des = $('#' + $(this).attr('class')),
            visible = $des.hasClass('active');

        $('div').hide();

        if(visible) {
            return;
        }

        $des
            .addClass('active')
            .show();
    });
</script>

在表格单元格悬停上显示/隐藏DIV（javascript）

2 个答案: