Question

我遇到以下语法：

 $('#sourcePane input:checked~img');

我知道它正在选择所有被检查的输入元素，并且也在id = sourcePane的元素下？正确？

但是什么是~img？做什么了？

另外，HTML中的相应元素是

<div data-module="Sources" data-module-id="sourcePane">

为什么它不是id =“sourcePane”而是data-module-id =“sourcePane”??

Answer 1

a~b

这是CSS 3通用兄弟组合子。这意味着“选择下一个兄弟姐妹的所有b元素。”。它的作用类似于相邻的兄弟组合 a + b ，但b不必立即跟随。

数据 - 属性

这是用于创建自定义属性的HTML5语法。来自HTML5 spec：

自定义数据属性旨在将自定义数据存储为页面或应用程序的私有数据，而没有更合适的属性或元素。

除非您将HTML更改为：

，否则您的选择器将无效

<div id="sourcePane" data-module="Sources" data-module-id="sourcePane">

或将您的选择器更改为：

$('[data-module-id="sourcePane"] input:checked~img');

Answer 2

'〜img'在输入后选择带有<img />标签的兄弟：选中。