Javascript 我可以在 twitter-bootstrap popover data-content 中使用 html 标签吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8494291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 06:14:11  来源:igfitidea点击:

Can I use html tags in twitter-bootstrap popover data-content?

javascriptruby-on-railstwitter-bootstrap

提问by Arman

I'm using Twitter-Bootstrap within a Rails 3.1.3 application. I have numerous elements with popovers like:

我在 Rails 3.1.3 应用程序中使用 Twitter-Bootstrap。我有许多带有弹出框的元素,例如:

<a data-original-title="Quality" rel="popover" data-content="Did they do a good job?  5 for Really Nice, 4 for Good Enough, 3 for Average, 2 for Somewhat OK, 1 for Really Bad">Q</a>

I'd like to have an ordered list in the content section similar to:

我想在内容部分有一个类似于以下内容的有序列表:

<OL reversed="reversed">
  <LI> for Really Nice </LI>
  <LI> for Good Enough </LI>
  ...
</OL>

Is there a simple way to do this without modifying the JavaScript? Whatever I try, the html code is displayed on the browser instead of being interpreted as such.

有没有一种简单的方法可以在不修改 JavaScript 的情况下做到这一点?无论我尝试什么,html 代码都会显示在浏览器上,而不是被解释为这样。

UPDATE

更新

Using the following code per David's suggestion

根据大卫的建议使用以下代码

link_to 'Q', '#', options: { data-original-title: "Quality", rel: 'popover', data-content: "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe }

generates a syntax error with my setup. I think this explains why: Ruby 1.9 hash with a dash in a key. So I'm using:

我的设置产生语法错误。我认为这解释了原因:Ruby 1.9 哈希在 key 中带有破折号。所以我正在使用:

<%= link_to 'Q', '#', options: { :"data-original-title" => "Quality", :rel => 'popover', :"data-content" => "Did they do a good job? <ol><li> for Really Nice </li></ol>".html_safe } %>

This doesn't work. It generates the following HTML:

这不起作用。它生成以下 HTML:

<a href="#" options="{:&quot;data-original-title&quot;=&gt;&quot;Quality&quot;, :rel=&gt;&quot;popover&quot;, :&quot;data-content&quot;=&gt;&quot;Did they do a good job? &lt;ol&gt;&lt;li&gt; for Really Nice &lt;/li&gt;&lt;/ol&gt;&quot;}">Q</a>

回答by iwasrobbed

You need to create a popover instance that has the htmloption enabled (place this in your javascript file after the popover JS code):

您需要创建一个html启用了该选项的 popover 实例(将其放在您的 javascript 文件中的 popover JS 代码之后):

$('.popover-with-html').popover({ html : true });

Then the link syntax would be:

那么链接语法将是:

<%= link_to('Q', '#', :class => "popover-with-html", :title => "Quality", "data-content" => "#{some_content_object.html_safe}") %>

If you're dynamically generating the content, then you need to use html_safelike David suggested so Rails doesn't escape the HTML code. Otherwise, you can just place HTML directly within that content attribute.

如果您动态生成内容,那么您需要html_safe像 David 建议的那样使用,这样 Rails 就不会转义 HTML 代码。否则,您可以直接将 HTML 放置在该内容属性中。

回答by David Sulc

Yes, you can do that, but you need to call html_safeon your string (if the string is generated by Rails)

是的,你可以这样做,但你需要调用html_safe你的字符串(如果字符串是由 Rails 生成的)

link_to 'Q', '#', :title => "Quality", :rel => 'popover', "data-content" => "Did they do a good job? <ol><li> for Really Nice </li><li>...</li></ol>".html_safe }