Question

我使用名为“imageLightbox”的脚本，在此脚本中是一行：

var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' ).attr( 'alt' );

有谁能告诉我那里发生了什么？

Answer 1

假设#imagelightbox是图像的ID：

$( '#imagelightbox' ).attr( 'src' )返回图像的src（源），比如“bla / foo.jpg”。

第二位代码使用src作为其选择器的一部分，所以

$( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"] img' )

实际上会变成

$( 'a[href="bla/foo.jpg"] img' )

找到一个href为bla/foo.jpg的标记，并在其中获取img元素。

最后，.attr( 'alt' );在最后，抓取该元素的alt标记文本，该文本将被返回并设置为description变量。

Answer 2

它获取alt的{{1}}属性，该属性包含在锚点中，img与href src相同。

分解：

#imagelightbox

有用的链接：

Attribute Selector

attr documentation

Answer 3

分成碎片

// get imageLightbox
var $imageLightbox =   $( '#imagelightbox' ); 

// get src of imageLightbox
var srcOfimageLightbox = $imageLightbox.attr( 'src' )

// find corresponding anchor
var $correspondingAnchor = $( 'a[href="' + srcOfimageLightbox + '"]')

// find correspponding image 
var $correspondingImage = $correspondingAnchor.find('img') 

// get alt attribute of correspponding image
var altOfcorrespondingImage = $altOfcorrespondingImage.attr( 'alt' ) 

// the description is taken from the alt attribute of the corresponding image
var description = altOfcorrespondingImage

Answer 4

它正在寻找一个img节点，它可以位于a节点的所有下降子节点中，如：

$( 'a img' )

但不在任何类型的a节点中，只有具有特定href属性的节点：

$( 'a[href=...] img' )

该属性是节点名称src属性的值，imagelightbox为其ID：

var src = $( '#imagelightbox' ).attr( 'src' );
$( 'a[href="' + src + '"] img' )

由于img节点，

可能是另一个src节点。

在找到图像时，它会获得alt属性。

var src = $( '#imagelightbox' ).attr( 'src' );
var altValue = $( 'a[href="' + src + '"] img' ).attr( 'alt' );

JavaScript代码说明

4 个答案:

分成碎片