Question

我试图在鼠标悬停的标签内显示可点击的链接，让它在我的地图上方流动。到目前为止，我所拥有的代码并没有将数据属性中的任何内容传递给span标记。如果我放了一个除link_to帮助之外的东西，比如说area.name，它就可以了。但是，任何带有link_to的东西都没有发生。我试图谷歌周围，只是发现如何将data-属性放入link_to助手，但不是相反。

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');
  });
});

Answer 1

好的，我找到了解决方法。

我没有尝试传递span中的link_to，而是分别传递路径“area_path（area）”和名称“area.name”。

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

在脚本中，我向其添加了以下代码

$(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;
    });
  });
});

放＆lt;％= link_to％＆gt;内部数据属性

1 个答案: