2016-06-09 9 views
-1

Ich versuche auf einem Mouseover einen anklickbaren Link in einem Tag zu bringen und habe es auf meiner Karte fließt. Der Code, den ich bisher habe, übergibt nichts vom Datenattribut zum Span-Tag. Wenn ich etwas anderes als einen link_to Helfer setze, sagen wir Area.name, funktioniert es. Es passiert jedoch nichts mit link_to und nichts. Ich habe versucht zu googlen und habe gerade herausgefunden, wie man das Datenattribut in link_to helper einfügt, aber nicht umgekehrt.Putting <% = link_to%> innerhalb daten Attribut

html:

<div class="map"> 
    <%= image_tag("strangemap.png", :usemap => "#worldmap", :class => "mapper") %> 
    <map name="worldmap"> 
    <% @areas.each do |area| %> 
     <area class="target noborder" 
      shape="poly" coords="<%= area.coords %>" 
      data-bottom="<%= link_to area.name, area_path(area) %>"> 
    <% end %> 
    <span id="boxbottom"></span> 
    </map> 
</div> 

jquery:

$(document).ready(function(){ 
    $("area").mouseover(function(){ 
    $("#boxbottom").fadeIn(0); 
    document.getElementById("boxbottom").innerHTML = $(this).data('bottom'); 
    }); 
}); 
+0

bewegen Spannweite ... kein gültiges Kind – charlietfl

+0

'' Tag ein schließenden Klammer fehlt. – Substantial

+0

'getElementById (" boxbuttom ")' enthält einen kritischen Tippfehler. – Substantial

Antwort

1

Ok, ich habe eine Arbeit um für dieses gefunden.

Anstatt zu versuchen, die link_to innerhalb der Spanne zu passieren, gehe ich den Weg „area_path (Bereich)“ und der Name „area.name“ getrennt. aus

<div class="map"> 
    <%= image_tag("strangemap.png", :usemap => "#worldmap", :class => "mapper") %> 
    <map name="worldmap"> 
    <% @areas.each do |area| %> 
     <area class="target noborder" 
      shape="poly" coords="<%= area.coords %>" 
      data-path="<%= area_path(area) %> 
      data-name="<%= area.name %>"> 
    <% end %> 
    <span id="boxbottom"></span> 
    </map> 
</div> 

Im Inneren des Skript, habe ich den folgenden Code, um es

$(document).ready(function(){ 
    $("area").mouseover(function(){ 
    $("#boxbottom").fadeIn(0); 
    document.getElementById("boxbottom").innerHTML = $(this).data('name'); 
    var path = $(this).data('path'); 
    $("#boxbottom").click(function(){ 
     window.location = path; 
    }); 
    }); 
});