数据属性未显示答案

【问题标题】：Data Attribute Not Showing数据属性未显示
【发布时间】：2013-03-26 05:39:33
【问题描述】：

我有一张在 Wordpress 中显示的特色图片。我已经为图像添加了一个数据属性，如下所示......

 <img  src="<?php echo $large_image ?>" 
       data-img="<?php echo $large_image ?>" 
       data-title="<?php echo get_the_title(); ?>" 
       data-description="<?php the_content();?>" 
       alt="" class="superbox-img" />

我想在网站前端显示数据标题和数据描述，但由于某种原因没有显示。在数据属性方面我是个大菜鸟，所以我为初学者方面道歉。我不知道是应该通过 CSS content: attr(data-title) 还是通过 jquery 显示标题和描述。

【问题讨论】：

请注意，如果您在数据属性值上使用htmlspecialchars() 会更安全。

标签： jquery html wordpress custom-data-attribute

【解决方案1】：

可以用jquery获取数据属性值：http://api.jquery.com/data/

<section data-role="page" data-page-num="42" data-hidden="true">
    <!-- Imagine a bunch of page-type content here... -->
</section>

<script type="text/javascript">
    console.log($('section').data('role'));
    // Expect string "page"

    console.log($('section').data('pageNum');
    // Expect 42, an integer...! 

    console.log($('section').data('hidden');
    // Expect the boolean TRUE!
</script>

【讨论】：

我会试试这个，看看 jquery api 链接。
好的，这正在工作，我在控制台中看到了标题。现在需要弄清楚如何回应它。谢谢！
我有现在可以在网页上显示吗？这可能是个愚蠢的问题。
是的，你可以在你的 php 文件中包含完整的脚本，或者在单独的 js 文件中
对，但我不知道如何在页面上而不是在控制台中显示它。像这样的东西会起作用吗？

【解决方案2】：

data 属性用于“创建”您自己的一组 html 属性。在您的示例中，您创建了另外 3 个属性，称为 data-img、data-title、data-description。

如何访问这些属性取决于您的应用程序，以便您可以使用 Jquery 访问它们甚至应用 CSS 规则！

【讨论】：