Question

我有一个HTML文档，其布局类似于：

<div id="main">
   <section class="page1 active">...</section>
   <section class="page2">...</section>
   <section class="page3">...</section>
   ...
</div>

每个部分的'pagex'类是固定的，不会改变，而'active'类是由jQuery代码的这部分在一个完全不同的脚本中应用和删除的：

$('a, section').removeClass('active');
$('a[data-index="'+activePage+'"], section[data-index="'+activePage+'"]').addClass('active');
}

activePage是不相关的变量。由于每个部分占据视口的100％，因此用户只能看到具有“活动”类的部分。

我要做的是使用.active作为jQuery选择器挂钩来设置活动部分中的子元素的样式，但它根本不起作用。

在每个部分中，会出现与此类似的模板：

<header class="title" data-sheet="1">Launch Count</header>
<div class="dropdown">
<span>Total</span>
<ul>
    <li data-sheet="1">Total</li>
    <li data-sheet="2">Falcon 9</li>
</ul>
</div>
<div class="contents">
<table>
    <tr>
        <td class="metric" data-sheet="1">12</td>
        <td class="metric" data-sheet="2">7</td>
    </tr>
    <tr>
        <td class="unit" data-sheet="1">Launches</td>
        <td class="unit" data-sheet="2">Test</td>
    </tr>
</table>
</div>
<footer>
<p data-sheet="1">Test</p>
<p data-sheet="2">Another test</p>              

</footer>

假设此特定模板位于具有page3类的部分内，我可以使用此规则：

$('section.page3 [data-sheet]').not('li').not("[data-sheet*='1']").hide();

隐藏section中所有包含属性page3的{{1}}类不等于1的元素。

但是，正如我之前所说，我正在尝试使用.active作为钩子，以确保此规则仅适用于活动的部分，如下所示：

data-sheet

但它根本行不通。没有什么是隐藏的，就像以前一样。为什么会发生这种情况？

动态添加类没有响应作为另一个jQuery脚本中的选择器？

0 个答案: