0

我问第一个问题是因为我对下面的代码很感兴趣。

基本上：我想通过根据特定内容过滤它们来切换 div 的可见性。每个 div 包含几个“标签”。单击“标签”时，只会显示包含相同“标签”的 div。看起来很简单的说。

但我在同位素 div 容器中运行。更重要的是，没有外部标签菜单，所以触发器就在要切换的 div 内。

我面临 2 条路径： 1. 使用 Gatsby 的附加同位素插件：IsoSelective，它是这样的：

$container.isoSelective({
    linkSelector: '.filter',    // this is the filter link 
    attrSelector: 'rel',           // the attribute containing the filter
    activeClass: 'selected'        // class to add to selected
});

但是，如果我的触发器在目标内，我似乎并不高兴。

  1. 我在现有的 JSFiddle 代码上做的一个分支，它工作得很好，但直到现在还不能在同位素内运行：

    http://jsfiddle.net/gVpqx/3/

————</p>

最后，这是我在 html 页面中的代码摘录：

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter base-first-tag' rel='.first-tag' href='#'>The Base First Tag</a></em>
<em><a class='filter second-tag' rel='.second-tag' href='#'>The Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter base-first-tag' rel='.base-first-tag' href='#'>The First also Base Tag</a</em>
<em><a class='filter second-tag' rel='.second-tag' href='#'>The Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

<div class="articlesBlock">
<div class="blockBox">
<a href="#"><p>Lorem ipsum paragraph.</p></a>   
<em><a class='filter first-tag' rel='.first-tag' href='#'>The First Tag</a></em>
<em><a class='filter second-new-tag' rel='.second-new-tag' href='#'>The New Second Tag</a></em>
<em><a class='filter third-tag' rel='.third-tag' href='#'> The Third Tag</a></em>
</div>  
</div>

下面是采用 IsoSelective 方法的 JSFiddle，但仍然无法正常工作。

http://jsfiddle.net/48nh6/1/

你怎么看 ？

谢谢

4

1 回答 1

0

所以这就是发生的事情：isoSelective 充当切换。单个过滤器可以组合打开/关闭 - 不仅仅是一个过滤器打开一个过滤器关闭一个过滤器。不确定这是否是您想要的，但这是一个示例。我将 active ( selected) 类加粗以进行演示。

http://jsfiddle.net/48nh6/4/ 请注意，在这个版本中，我将标记类移动到容器中——而不是锚本身。由于您要显示/隐藏（过滤）块而不是链接，因此需要将标记类移至顶层。

  1. 使用顶部导航过滤器（不在同位素列表中）单击全部。请注意，它“关闭”并且所有元素都被隐藏。
  2. 单击第一个标记。请注意，它变为粗体。
  3. 单击第三个旧标记。请注意，它也是粗体；第一个标签保持粗体。现在您会看到两个项目——一个是 Old First，另一个是 Third Old。

现在。您可以使用同位素内部的标签重复相同的练习。1. 确保在顶部导航中切换“全部” 2. 单击第一个框中的第三个标签。请注意只有两个活动项目 3. 单击第一个框中的 The Base First Class。注意所有三个现在都出现了。

另请注意，标签仅在第一个框中“活动”。如果您单击框 2 中的“第一个也是基类”，它会切换“活动”，但由于第一个，它已经处于活动状态！所以什么都没有改变（除了文本变成粗体）。

我提供两种选择：

  1. 如果您想要像等选择性这样的包容性（taht 是切换而不是排他过滤器），那么您将等选择连接到顶级过滤器并在单击内部过滤器时“假点击”它。
  2. 如果您不想要像等选择性这样的包容性，那么请自己制作解决方案。

选项 1：http: //jsfiddle.net/gy8Xf/1/

$container.isoSelective({
    linkSelector: '#filters .filter',
    attrSelector: 'rel',
    activeClass: 'selected'
});

仅在#filters .filter 上选择，然后...

$container.find('a').click(function()
                           {
                               var rel = $(this).attr('rel');

                               // get all the #filters .filter elements that have the same rel
                               var $filters = $('#filters .filter').filter(function()
                                                            {
                                                                return $(this).attr('rel') == rel;
                                                            });

                                // trigger a click
                               $filters.click();

                           });

每当在容器内单击链接时，找到与刚刚单击的链接#filters .filter具有相同属性的 ，并触发.relclick

选项 2：http: //jsfiddle.net/9ThvU/1/

$('#filters .filter, #content .filter').click(function()
                           {
                               var rel = $(this).attr('rel');

                               $container.isotope( {filter: rel});
                           });

简单地说，只要单击锚点（我保留了#filters，不确定是否需要它们），就可以根据rel属性设置新的同位素过滤器。

于 2013-01-04T16:15:31.247 回答