Question

我有一个在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来显示标题和描述。

Answer 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>

Answer 2

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

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

数据属性未显示

2 个答案: