Question

我正在阅读一些代码，并且有一段html上写着：

<div id="uniqueId1234" data-target=".uniqueId1234">
    ...
</div>

然后在同一个html文件中，有一个span元素似乎将这个div用作类：

<span class="uniqueId1234">
    ...
</span>

有人可以解释这是如何工作的吗？我认为一个类是在css文件中创建的。对不起，如果这是一个愚蠢的问题。

Answer 1

这可能是某些Javascript代码或库的一部分，它会使用data-target属性侦听元素上的某些类型的更改或事件。

当触发此事件时，它可以使用该属性的值作为执行某些其他逻辑的选择器，如下面这个基于jQuery的基本示例所示：

// When an element containing your data-target attribute is clicked
$('[data-target]').click(function(){
     // Find the appropriate target (i.e. ".uniqueId1234")
     var target = $(this).data('target');
     // Then use it as a selector for some type of operation
     $(target).toggle();
});

CSS在CSS中很常见，用于设置多个元素的样式，但它们通常也可以用作Javascript中的一种机制，这可能就是你的场景中的情况。

Answer 2

将div的data-target属性设置为该div的id是什么意思？

没什么标准。 data-*属性旨在保存自定义代码（通常是客户端JS）的自定义数据以进行处理。

我认为类是在css文件中创建的。

类是用于将元素放入任意组的HTML功能。它们通常在编写CSS时使用，但也可用于客户端JS和其他代码。

将div的data-target属性设置为该div的id是什么意思？

2 个答案: