2016-12-27 4 views
0

Ich habe ein div wie so strukturiert:Schienen link_to auf Overlay div

  <% @posts.each do |post| %> 
      <!-- Shot --> 
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
       <div class="shot shot-minimal"> 
       <div class="shot-preview"> 
        <a class="img" href="shot-gallery.html"><img src="http://rwdtow.stdout.in/img/avatar-icon.png" alt=""></a> 

        <a class="text-overlay"> 
         <span class="heading"><%= post.tite %></span> 
         <span class="desc"><%= post.shortdescription %></span> 
        <time datetime="2016-02-04 22:30">7 hours ago</time> 
        </a> 
       </div> 

       <div class="shot-detail"> 
        <div class="shot-info"> 
        <p><%= post.title %></p> 
        </div> 

        <ul class="shot-stats"> 
        <li><i class="fa fa-eye"></i><span>6.3k</span></li> 
        <li><a class="like" href="#"><i class="fa fa-heart"></i><span>1.2k</span></a></li> 
        </ul> 
       </div> 
       </div> 
      </div> 
      <!-- END Shot --> 
      <% end %> 

In der obigen div habe ich ein Overlay:

   <a class="text-overlay"> 
        <span class="heading"><%= post.tite %></span> 
        <span class="desc"><%= post.shortdescription %></span> 
       <time datetime="2016-02-04 22:30">7 hours ago</time> 
       </a> 

So legte ich link_to mit dem Overlay, so dass die Text-Overlays, der Text anklickbar:

   <%= link_to post, class:"text-overlay" do %>   
        <span class="heading"><%= post.tite %></span> 
        <span class="desc"><%= post.shortdescription %></span> 
       <time datetime="2016-02-04 22:30">7 hours ago</time> 
       <% end %> 

das Overlay funktioniert richtig, aber wenn ich darauf klicken, es braucht mich nicht auf die sh Aktion für die Post. Heres, wie mein endgültiger Code aussieht:

 <% @posts.each do |post| %> 
     <!-- Shot --> 
     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
      <div class="shot shot-minimal"> 
      <div class="shot-preview"> 
       <a class="img" href="shot-gallery.html"><img src="http://rwdtow.stdout.in/img/avatar-icon.png" alt=""></a> 

       <%= link_to post, class:"text-overlay" do %>   
       <span class="heading"><%= post.tite %></span> 
       <span class="desc"><%= post.shortdescription %></span> 
       <time datetime="2016-02-04 22:30">7 hours ago</time> 
       <% end %> 
      </div> 

      <div class="shot-detail"> 
       <div class="shot-info"> 
       <p><%= post.title %></p> 
       </div> 

       <ul class="shot-stats"> 
       <li><i class="fa fa-eye"></i><span>6.3k</span></li> 
       <li><a class="like" href="#"><i class="fa fa-heart"></i><span>1.2k</span></a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <!-- END Shot --> 
     <% end %> 

Antwort

0

Sorry, ich kann nicht wegen meines Rufes kommentieren. Kannst du mir noch zwei Dinge bieten?

  1. Rendered HTML-Code im Browser. Sie können es erhalten, indem Sie "Element prüfen" im Browser ausführen.
  2. JavaScript/JQuery/CoffeeScript verbunden mit $(".text-overlay"). Entfernen Sie event.preventDefault(). Ich habe JQuery Syntax verwendet. Wenn Sie eine andere Bibliothek verwenden, finden Sie die Syntax für diese und entfernen Sie sie.