-
data-id
-通过调用属性
element.attr('data-id')
返回字符串“song-1”。
-
将DOM元素作为目标
id="song-1"
通过呼叫
$('#song-1')
;
哪一个是
$('#' + element.attr('data-id'))
(如果您不知道原因,请参阅步骤1)。
-
既然我们有了目标,我们应该提前隐藏所有其他歌词
$('.lyrics').hide()
只显示通缉犯
$('#' + element.attr('data-id')).show()
.
initAudio($('#playlist li:first-child'));
function initAudio( element ) {
// this version performs slightly better than the one in the 1, 2, 3 explanations
$('.lyrics').hide().filter('#' + element.attr('data-id')).show()
}
$('#playlist').on('click', function( oEvent ) {
initAudio( $( oEvent.target ) )
} );
<ul id="playlist">
<li class="song-list active" song="song-1.wav" data-id="song-1">Click Me 1!</li>
<li class="song-list" song="song-2.wav" data-id="song-2">Click Me 2!</li>
<li class="song-list" song="song-3.wav" data-id="song-3">Click Me 3!</li>
</ul>
<div id="song-1" class="lyrics">Lyrics to song 1</div>
<div id="song-2" class="lyrics">Lyrics to song 2</div>
<div id="song-3" class="lyrics">Lyrics to song 3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
这就像你希望的那样(至少我希望如此),但不是一个理想的解决方案;只是想解释一下发生了什么!上述解决方案的缺点是需要大量不必要的计算。
//initAudio($('#playlist li:first-child'));
initAudio($('#playlist').find('li:first-child')); // performs better
function initAudio( element ) {
// if you chain it this way you don't have to cache $('.lyrics')
$('.lyrics') // get collection of all div.lyrics
.filter('.active').removeClass('active') // target the current div.lyrics.active and remove class "active"
.end() // get collection div.lyrics back again
.filter('#' + element.attr('data-id')).addClass('active'); // filter target div.lyrics#song-[1|2|3] and add class "active"
}
$('#playlist').on('click', function( oEvent ) {
initAudio( $( oEvent.target ) )
} );
.lyrics { /* this will prevent to show all lyrics before you call initAudio() */
display: none;
}
.lyrics.active { /* style active lyrics as you like */
display: initial;
}
<ul id="playlist">
<li class="song-list active" song="song-1.wav" data-id="song-1">Click Me 1!</li>
<li class="song-list" song="song-2.wav" data-id="song-2">Click Me 2!</li>
<li class="song-list" song="song-3.wav" data-id="song-3">Click Me 3!</li>
</ul>
<!-- set one as active in advance if you like -->
<div id="song-1" class="lyrics active">Lyrics to song 1</div>
<div id="song-2" class="lyrics">Lyrics to song 2</div>
<div id="song-3" class="lyrics">Lyrics to song 3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
额外重新组合
要在使用自定义HTML5属性时保持有效标记,只需在属性前面加上
data-
所以考虑改变
song="song-#.wav"
到
data-song="song-#.wav"
cover
data-cover
,
artist
到
data-artist
等)。
额外的灵感
根据您构建站点的方式,还有比使用
data-*
为什么不把数据从实际的HTML中分离出来呢。为此,您可以将数据作为变量进行部署。
var sIdCurrent = undefined,
oData = {
'song-1': { artist: 'artist 1', lyrics: 'Lyrics to song 1' },
'song-2': { artist: 'artist 2', lyrics: 'Lyrics to song 2' },
'song-3': { artist: 'artist 3', lyrics: 'Lyrics to song 3' },
};
function initAudio( sId ) {
if ( sId === sIdCurrent ) return;
sIdCurrent = sId;
//$('#artist').find('span').text( oData[ sId ].artist );
//$('#lyrics').find('span').text( oData[ sId ].lyrics );
// the above can be abstracted to
for ( sKey in oData[ sId ] ) {
$('#' + sKey).find('span').text( oData[ sId ][ sKey ] );
}
}
initAudio('song-1');
$('#playlist').on('click', function( oEvent ) {
initAudio( oEvent.target.id )
} );
<!-- As you can see the markup is much cleaner now.
No need to store data uneffectively in markup. -->
<ul id="playlist">
<li class="song-list active" id="song-1">Click Me 1!</li>
<li class="song-list" id="song-2">Click Me 2!</li>
<li class="song-list" id="song-3">Click Me 3!</li>
</ul>
<div id="artist">Artist: <span><span></div>
<div id="lyrics">Lyrics: <span><span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
