我正在设计一个JPlayer（HTML5音频/视频播放器）的实例，并遇到了一个奇怪的小故事。我通过它的ID调用一个元素来设置一些属性（宽度，高度，背景）但是没有看到正确的结果。我肯定错过了什么！而不是使用bg图像看到适当的100x100px缩略图，背景图像仅显示在元素内的链接后面..所以它看起来是60x20px（ish）。
我错过了什么？
感谢您的帮助！
P.S.-我正在尝试编辑的元素通过JavaScript
添加到页面中jsFiddle：http://jsfiddle.net/danielredwood/MmvJX/1/
HTML：
<div id="container">
<div id="jquery_jplayer_2" class="jp-jplayer"></div>
<div class="jp-audio">
<div class="jp-type-playlist">
<div id="jp_interface_2" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="#" class="jp-previous" tabindex="1">previous</a></li>
<li><a href="#" class="jp-next" tabindex="1">next</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<div id="jp_playlist_2" class="jp-playlist">
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li></li>
</ul>
</div>
</div>
</div>
CSS：
li {
list-style-type: none;
float:left;
}
#jp_playlist_2_item_0 {
width:100px;
height:100px;
background:url(http://a4.mzstatic.com/us/r2000/011/Music/f1/98/7f/mzi.qlkzqpmu.100x100-75.jpg);
}
JavaScript的：
//<![CDATA[
$(document).ready(function(){
var Playlist = function(instance, playlist, options) {
var self = this;
this.instance = instance; // String: To associate specific HTML with this playlist
this.playlist = playlist; // Array of Objects: The playlist
this.options = options; // Object: The jPlayer constructor options for this playlist
this.current = 0;
this.cssId = {
jPlayer: "jquery_jplayer_",
interface: "jp_interface_",
playlist: "jp_playlist_"
};
this.cssSelector = {};
$.each(this.cssId, function(entity, id) {
self.cssSelector[entity] = "#" + id + self.instance;
});
if(!this.options.cssSelectorAncestor) {
this.options.cssSelectorAncestor = this.cssSelector.interface;
}
$(this.cssSelector.jPlayer).jPlayer(this.options);
$(this.cssSelector.interface + " .jp-previous").click(function() {
self.playlistPrev();
$(this).blur();
return false;
});
$(this.cssSelector.interface + " .jp-next").click(function() {
self.playlistNext();
$(this).blur();
return false;
});
};
Playlist.prototype = {
displayPlaylist: function() {
var self = this;
$(this.cssSelector.playlist + " ul").empty();
for (i=0; i < this.playlist.length; i++) {
var listItem = (i === this.playlist.length-1) ? "<li class='jp-playlist-last'>" : "<li>";
listItem += "<a href='#' id='" + this.cssId.playlist + this.instance + "_item_" + i +"' tabindex='1'>"+ this.playlist[i].name +"</a>";
// Associate playlist items with their media
$(this.cssSelector.playlist + " ul").append(listItem);
$(this.cssSelector.playlist + "_item_" + i).data("index", i).click(function() {
var index = $(this).data("index");
if(self.current !== index) {
self.playlistChange(index);
} else {
$(self.cssSelector.jPlayer).jPlayer("play");
}
$(this).blur();
return false;
});
}
},
playlistInit: function(autoplay) {
if(autoplay) {
this.playlistChange(this.current);
} else {
this.playlistConfig(this.current);
}
},
playlistConfig: function(index) {
$(this.cssSelector.playlist + "_item_" + this.current).removeClass("jp-playlist-current").parent().removeClass("jp-playlist-current");
$(this.cssSelector.playlist + "_item_" + index).addClass("jp-playlist-current").parent().addClass("jp-playlist-current");
this.current = index;
$(this.cssSelector.jPlayer).jPlayer("setMedia", this.playlist[this.current]);
},
playlistChange: function(index) {
this.playlistConfig(index);
$(this.cssSelector.jPlayer).jPlayer("play");
},
playlistNext: function() {
var index = (this.current + 1 < this.playlist.length) ? this.current + 1 : 0;
this.playlistChange(index);
},
playlistPrev: function() {
var index = (this.current - 1 >= 0) ? this.current - 1 : this.playlist.length - 1;
this.playlistChange(index);
}
};
var audioPlaylist = new Playlist("2", [
{
name:"Paparazzi",
mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.mp3",
oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.ogg",
wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_paparazzisnlmix.wav"
},
{
name:"Dance In The Dark",
mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.mp3",
oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.ogg",
wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_danceinthedark.wav"
},
{
name:"Born This Way",
mp3:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.mp3",
oga:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.ogg",
wav:"http://www.minimalpluscreative.com/newclients/fernandogaribay/audio/fernando_garibay_bornthisway.wav"
}
], {
ready: function() {
audioPlaylist.displayPlaylist();
audioPlaylist.playlistInit(false); // Parameter is a boolean for autoplay.
},
ended: function() {
audioPlaylist.playlistNext();
},
play: function() {
$(this).jPlayer("pauseOthers");
},
swfPath: "../js",
supplied: "oga, mp3"
});
});
//]]>
答案 0 :(得分：0)
您的CSS无效，因为您没有正确设置元素样式; height和width属性不适用于inline元素，这就是背景无法正常运行的原因。这是一个修复：
#jp_playlist_2_item_0 {
display: block;
我不确定问题还有什么，所以这是一个有效的演示：http://jsfiddle.net/sE4mZ/