【问题标题】：Html5 data attributes in div tag ( Rails )div 标签中的 Html5 数据属性（Rails）
【发布时间】：2016-06-05 17:50:09
【问题描述】：

我在我的 rails 项目中使用我在 themeforest 上的主题，开发人员使用自定义数据标签来加载背景图像。代码如下所示。

<div class="swiper-slide fit slide-1" data-pages-bg-image="assets/images/banner_1.jpg">

在 div 标签中使用 data 属性的语法是什么？我正在使用 erb 作为我的模板引擎

【问题讨论】：

标签： ruby-on-rails html ruby-on-rails-4 erb custom-data-attribute

【解决方案1】：

如果你想在你的 erb 中为你的 div 设置数据属性，并从你的数据库中获取一些值，你可以这样做。

<div class="swiper-slide fit slide-1" data-pages-bg-image="<%= @item.bg_image %>">
#@item.bg_image is an example, you should put your variable there

【讨论】：

它不是来自我的数据库，而是来自我的资产。我尝试了您的资产代码，但它不起作用:(
好的，假设您有一个名为“bg_image.jpg”的图像。您可以简单地将 images/bg_image.jpg 写在 data 属性的引号内。应该管用。告诉我！
不工作尝试包括和排除图像路径
这些是我在控制台中看到的一些错误Console Error Image
哦，我有点明白问题出在哪里了，主题作者正在通过 jquery 添加图像，它有 background-image: url() 和里面的 url 变量。因此，由于 rails 有自己的背景图像语法，因此它不起作用。所以我去把它改成asset-url，但还是不行

【解决方案2】：

试试这个模式

1。使用纯 html 标签

<div class="swiper-slide fit slide-1" data-pages-bg-image="assets/images/banner_1.jpg">

2。使用`content_tag`

如果你的 ruby 版本大于 2.3

<%= content_tag(:div, "blah blah", 'data-pages-bg-image' => "asets/images/banner_1.jpg", class: "swiper-slide fit slide-1") %>

是否（1.9 等）

<%= content_tag(:div, 'blah blah', "data-pages-bg-image" => "assets/images/banner_1.jpg" :class => "swiper-slide fit slide-1") %>

示例）

<section id="tabs">
  <ul>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "6" } ) %></li>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "5" } ) %></li>
    <li><%= content_tag(:a, "text", :href=> "#", :data => { :flights => "5" } ) %></li>
  </ul>
</section>

【讨论】：

【解决方案3】：

如果是 div，数据不是属性。

您可以将 attr.data 与 div 一起使用。 [数据页-bg-image]=

Please check this answer.

【讨论】：

试试这个模式

1。使用纯 html 标签

2。使用content_tag

2。使用`content_tag`