迭代时锚定 - Rails答案

【问题标题】：Anchor while itering - Rails迭代时锚定 - Rails
【发布时间】：2020-07-19 22:58:55
【问题描述】：

我正在尝试在索引页面中创建一个锚点，同时遍历一个元素列表。在主页上，我用“更多信息”按钮显示每个元素。单击时，它会转到详细元素的索引。我尝试了下面的代码，但它不起作用。

link_to 'More info', tours_path(@tour, :anchor => "#{tour.name}"

我也试过了，没有成功：

link_to 'More info', tours_path(@tour, :anchor => tour.name

这里是 home.html.erb 的代码：

<section id="walking-tours">
  <h2 class="text-center">Lisbon walking tours </h2>
      <div class="walking-tours d-flex">
        <% @tours.each do |tour| %>
          <div class="walking-tours-cards item">
            <% photo = tour.photos[0] %>
             <%= cl_image_tag photo.key, height: 300, width: 300, crop: :fill if tour.photos.attached? %>
                <h3> <%= tour.name  %> </h3>
                <p> <%= tour.description %> </p>
                 <%= link_to 'More info', tours_path(@tour, :anchor => "#{tour.name}"), class: 'btn btn-outline-secondary' %>
          </div>
        <% end %>
      </div>
</section>

以及 index.html.erb 中的代码

<div class="index-tours">
  <div class="tours-title">
    <h1 >WALKING TOURS</h1>
  </div>

     <div class="tours-list">
        <% @tours.each do |tour| %>
         <div class="walking-tours-details ">

          <div class="walking-tours-info">
            <h3> <%= tour.name  %> </h3>
            <p> <%= tour.full_information %> </p>
            <p><b>Duration</b> -<%= tour.duration %> </p>
            <p><b>Meeting Point</b> - <%= tour.meeting_point %> </p>
          </div>
          <div class="tours-pics">
            <% tour.photos.each do |photo| %>
             <%= cl_image_tag photo.key, height: 220, width: 220, crop: :fill, :class => "tours-img" %>
            <% end %>
          </div>

          </div>
            <% if logged_in? %>
              <%= link_to 'Edit', edit_tour_path(tour), :class => "tours-links" %> <%= link_to 'Destroy', tour, method: :delete, data: { confirm: 'Are you sure?' } %>
            <% end %>
        <% end %>
    </div>

目前，所有“更多信息”按钮都转到列表的第一个元素（在索引页面的顶部）。有什么想法可以帮忙吗？谢谢！！塞西尔

【问题讨论】：

生成什么代码？请注意，您的第二种形式是推荐的形式，因为 99% 的时间 "#{x}" 和 x 是相同的，但您的意思是 x.to_s 的情况除外。
突出的一点是您使用来自tour 的锚链接到@tour。这两个不应该是一样的吗？我想@tour 应该是tour。
你好 tadman，我尝试使用 tour 而不是 @tour，但它不起作用。奇怪的是我也尝试了@profile（这完全是荒谬的，因为我的代码中没有配置文件变量）并且它不会引发任何错误。该链接仍然有效并转到索引页面的顶部。至于您的问题“它生成什么代码？” : 不知道你的意思，所以我无法回答;(
就像在浏览器中查看生成页面的源代码并检查 HTML 属性是否设置正确。
加载的源对应于每个游览的名称。网址似乎也不错：http://localhost:3000/tours.21#The%20Mediterranean%20Civilizations 用于一次旅行，http://localhost:3000/tours.22#The%20Portuguese%20Tiles 用于另一次。锚只能使用 id 或类名吗？当我遍历每次旅行时，我不能给他们一个唯一的 ID 或类。我被卡住了..

标签： ruby-on-rails ruby iteration anchor

【解决方案1】：

我通过生成动态ID找到了解决方案：

  <% tour_link = tour.name %>
  <% tour_identification = tour_link.gsub(/\s+/, '') %>
  <div id= <%= tour_identification %> >

对于 link_to ：

<%= link_to 'More info', tours_path(tour, anchor: tour_identification) %>

但我仍然想知道锚是否可以在没有 ID 的情况下工作。

【讨论】：