如何使用嵌套的content_tag在rails3中创建带有嵌套span的<a href>?

Question

嗨，我有一个初学者问题，我想创建以下 HTML 结果：

<a href="/controller/action" class="button-big layer">TEXT<span class="arrow-big"></span></a>

在上面的HTML中，我想要使用带有span类别的文本，通过CSS将其样式化为图像。

当我尝试下列实现时，结果只反映了所需实现的一部分：

<%= link_to "TEXT", controller_path, :class => "button-big layer" %>

导致结果为：

<a href="/controller/action" class="button-big layer">TEXT</a>

和

<%= link_to(content_tag(:span, "", :class => "arrow-big"), controller_path, :class => "button-big layer") %>

得到的结果是：

<a href="/controller/action" class="button-big layer"><span class="arrow-big"></span></a>

有人知道如何完成吗？

- user1260945

Answer 1

你也可以使用link_to助手的另一种语法来嵌套标签。

<%= link_to controller_path, :class=> "button-big layer" do %>
  Text
  <%= content_tag(:span, "", :class => "arrow_big" %>
<% end %>

- Johny

---

嗨，感谢您的解决方案，它与另一个解决方案一样有效，只是有点小问题。由 span 标签插入的“图像”的 CSS 样式必须进行调整，因为插入了一个换行符。但这不是什么大问题，做得很好！ - user1260945

真是太神奇了，似乎没有人谈论link_to和content_tag的块选项。就好像没有人需要嵌套，或者没有人使用 Haml，其中嵌套内容非常麻烦。很棒的答案，知道link_to和content_tag也可以实现这个功能真是太好了。 - ahnbizcad

寻找这个已经有好长时间了。从文档中没有理解到link_to可以运行块选项。 - Jerome

Answer 2

只需将您的文本与“span”连接起来：

<%= link_to(("TEXT" + content_tag(:span, "", :class => "arrow-big")).html_safe,
             controller_path,
             :class => "button-big layer") %>

你需要在连接符周围加上`.html_safe`，因为否则`+`运算符将会转义`content_tag`的HTML内容。

- Thilo

---

嗨，非常好，这正是我正在寻找的。没有对CSS进行任何更改就按预期工作，感谢您的解决方案 :-) - user1260945

这个很好用，我根据我的需求反转了文本和content_tag，但它正是我所需要的。 - Jared Knipp

Answer 3

阅读你的问题后，我解决了我的问题。接下来我提出另一种回答你的问题的方法。

你可以创建一个帮助方法来生成所需的链接。它可能是这样的：

def link_with_text_and_span(href, text, span_options= {}, link_options = {})
    span_tag = content_tag(:span, span_options[:content] || '', :class => span_options[:class] || '')
    link_to(span_tag, href, :class => link_options[:class] || '')
  end

好处是你的视图将更加清晰。然后，您只需要在视图中调用此帮助程序方法。

  <%= link_with_text_and_span("/controller/action", "TEXT", {class: 'arrow-big'}, class: button-big) %>

注意：此代码肯定可以改进，如果其他用户想要，请自行修改。

- wviana

Answer 4

这是另一种使用方式，可以不用content_tag。虽然不太干净，但它起作用了！

<%= link_to '<span class="arrow_big"></span>'.html_safe, controller_path, class: "button-big layer" %>

- coletrain