Question

我刚刚在过去的两天里学过jQuery，所以我对此很陌生。

我正在尝试构建一个简单的导航侧边栏。我将条形图构建为表格，当用户越过特定单元格时，该单元格会亮起，并且原始条形图旁边会出现另一个子导航栏。

原始栏位于标题下方。所以我使用的语法是：

var headerHeight = $('#headerTable').height();
$('#selectStart').offset({left: 0, top: headerHeight});
....
<table id="selectStart" class="selector1">
    <tr><td id="sel1Projects" class="selector1">
....

到目前为止，这么好。现在我想做到这一点，当用户点击该表中的a时，相应的子导航栏会立即出现在第一个导航栏的右侧。所以我写了两个新表来测试它：

<table id="selectProjects" id="table2" class="selector2" class="table2">
<tr><td id="sel2Project1" class="selector2">
....
<table id="selectDevelopment" id="table2" class="selector2" class="table2">
<tr><td id="sel2Dev1" class="selector2">

但是这些选择器正在成为一个真正的痛苦。当我做的时候

var select1Width = $('#selectStart').width();
$('#selectProjects').offset({left: select1Width, top: headerHeight});
$('#selectDevelopment').offset({left: select1Width, top: headerHeight});

完美无缺;然而，这不是很好的编码 - 我应该对所有类似的表进行分组，以便我可以以相同的方式对它们进行定位，然后只显示我希望用户在当时看到的那个。

$('.selector2').offset(...)

在选择所有表时工作正常，但它也将所有s放在同一个位置，因为它们都共享同一个类以用于样式目的。然而，到目前为止，这完全符合我的预期。

$('.selector2 table').offset(...)

我希望这只是选择该类中的表。它没有做任何事情。我输入的方式有问题吗？经过一番挫折之后，我向他们每个人添加了第二个类“table2”。

$('#table2').offset(...)

仍然没有。所以我为他们添加了新类

$('.table2').offset(...)

没有;但是，使用他们共享的另一个类，selector2，确实有效。并且它不是不需要选择表的问题，因为当我单独选择表时，我得到了期望的结果。

那么我做错了什么，我不理解什么？

Answer 1

而不是$（'。selector2 table'）。offset（...）

试试这个

$（'table.selector2'）。offset（...）

Answer 2

你无法重复jquery的id ...看看它是否能解决你的问题

jQuery选择器很有气质

2 个答案: