我的錨標簽不起作用。

Question

問題正如標題中所說，單擊帶有錨標記的圖像不起作用。

以下是網格列表項的示例：

<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 -->

grid-overlay 保持隱藏，直到用戶點擊網格項。 單擊后，將顯示信息部分。 在信息部分有一個地圖和一個圖表，一旦點擊它們應該打開一個新的錨標簽。

我的猜測是我用來實現這種效果的腳本是導致 boxgrid.js 問題的原因。 在此處找到 github 存儲庫，該站點在此處激增。

Answer 1

問題在於<div class="grid-overlay">內容在 DOM 中的位置。 目前，有 12 個，每個列表項中有 1 個。 您需要這些疊加層位於列表項之外。

看看下面的gif。

我單擊起始列表項之一，疊加層出現。 像往常一樣，點擊地圖錨點不起作用。 然后我將<div class="grid-overlay"> DOM 拖到其列表項之外並將其放在</body>之前。 樣式現在有點亂（需要應用背景顏色），但關鍵是地圖錨鏈接現在可以工作了。

對此的一種解決方案是將所有<div class="grid-overlay">元素移動到</body>之前，並在每個元素上添加一個數據屬性，將其與遠足目的地相關聯。 例如：

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

然后，您可以將此目的地與單擊的列表項相關聯：

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

在這一點上，您必須稍微弄亂原始腳本。 你想改變：

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

因為<div class="grid-overlay">元素將不再作為每個$item子元素駐留。

祝你好運！