javascript - 我的 anchor 标签不起作用。

Question

问题如标题所述，点击用 anchor 标签包裹的图像不起作用。

这是网格列表项的示例:

<li class="grid-list-item">
            <h3 class="grid-trail-name">Marshall Canyon</h3><span class="grid-loc">Mt Baldy, California</span>
            <div class="grid-overlay">
                <span class="grid-close">close</span>
                <div class="grid-trail">
                    <div class="open">
                        <div class="info-flex info">
                            <div class="info-sum info-flex-child">
                                <h3 class="info-sum-header">Marshall Canyon...</h3>
                                <p class="info-sum-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. </p>
                            </div>
                            <div class="info-map info-flex-child">
                                <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/map/20150714/0000154499_big_english.jpg?q=1461036407851" data-item="map_img" data-src="http://www.ramblr.com/media/photo/map/20150720/0000158962_big_english.jpg"  class="map"> </a>
                            </div>
                            <div class="info-graph info-flex-child">
                                <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/chart/20150714/0000154499_1_english.jpg?q=1461036467654" data-item="chart_img" data-src="http://www.ramblr.com/media/photo/chart/20150720/0000158962_1_english.jpg" class="graph"></a>
                            </div>
                            <div class="info-pic-section info-flex-child">
                                <img src="images/marshall.jpg" alt="" class="info-pic">
                            </div>
                        </div><!-- GRID INFO -->
                    </div><!-- OPEN -->
                </div><!-- GRID TRAIL -->
            </div><!-- GRID OVERLAY -->
        </li><!-- GRID ITEM -->

网格叠加层保持隐藏状态，直到用户单击网格项。单击后，将显示信息部分。在信息部分中有一张 map 和一张图表，单击它们后应该会打开一个新的 anchor 标记。

我的猜测是我用来实现此效果的脚本是导致 boxgrid.js 问题的原因。找到 github 存储库 here并且该站点正在激增here .

Answer 1

问题在于 <div class="grid-overlay"> 在哪里内容驻留在 DOM 中。目前，有 12 个，每个列表项中有 1 个。您将需要这些叠加层才能在列表项之外生存。

查看以下 gif。

我单击其中一个起始列表项，然后出现叠加层。像往常一样，点击 map anchor 不起作用。然后我拖动 <div class="grid-overlay"> DOM 在其列表项之外并将其放在 </body> 之前.样式现在有点困惑(需要应用背景颜色)，但关键是 map anchor 链接现在可以使用了。

一个解决方案是移动所有 <div class="grid-overlay"> </body> 之前的元素并在每个人身上添加一个数据属性，将其与远足目的地相关联。例如:

<div class="grid-overlay" data-belongs-to="Potato Mountain">

然后，您可以将此目的地与单击的列表项相关联:

<li class="grid-list-item" data-location="Potato Mountain">

在这一点上，你必须弄乱 original script一点。你想改变:

$overlay = $item.children( 'div.grid-overlay' )

因为 <div class="grid-overlay">元素将不再作为子元素存在于每个 $item 中.

祝你好运!