アンカータグが機能していません。

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

グリッドオーバーレイが隠れたままです。クリックすると情報セクションが表示されます。情報セクション内には、地図とグラフがあり、クリックすると新しいアンカータグを開く必要があります。

私がこの効果を達成するために使用したスクリプトは、boxgrid.jsの問題を引き起こしていると思います。 github repo hereを見つけて、サイトはサージになっていますhere。

Answer 1

DOMにコンテンツがあるのは、<div class="grid-overlay">です。現在、それぞれのリスト項目の中に1つ、12があります。これらのオーバーレイがリスト項目の外側に存在する必要があります。

下記の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">

、あなたはoriginal script少しを台無しにする必要があると思います。あなたは、変更したいと思います：<div class="grid-overlay">要素はもはや各$itemの内部子供として存在しないだろう

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

ので。

幸運を祈る！