JavaScript代碼說明

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

它獲取img的alt屬性，該屬性包含在錨點中，該錨點具有與#imagelightbox的src相同的href 。

細分如下：

// get the src attribute of the #imagelightbox element
var imagelightSrc = $( '#imagelightbox' ).attr( 'src' );  

// get an img contained in a anchor with an href equal to imagelightSrc
var img = $( 'a[href="' + imagelightSrc + '"] img' );

// get the alt attribute of that image
var description = img.attr( 'alt' );

有用的鏈接：

屬性選擇器

attr文檔

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' )

但不在任何類型的節點中，僅在具有specfic href屬性a節點中：

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

該屬性是以imagelightbox作為其ID的節點名稱的src屬性的值：

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

由於src節點，這可能是另一個img節點。

最后，當它找到圖像時，將獲得alt屬性。

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