由jQuery创建的CSS样式JPlayer元素

Question

我正在设计JPlayer（HTML5音频/视频播放器）的一个实例，并且遇到了一个奇怪的小snafu。我通过它的ID调用元素来设置一些属性（宽度，高度，背景），但没有看到正确的结果。我绝对错过了一些东西！而不是用bg图像看到适当的100x100px缩略图，背景图像只显示在元素内部的链接后面..所以它看起来是60x20px（ish）。

我错过了什么？

感谢您的帮助！

PS-我试图编辑的元素通过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" 
    }); 
}); 
//]]> 

Answer 1

你的CSS是行不通的，因为你没有正确的造型元素; height和width属性不适用于inline元素，这就是背景无法正常工作的原因。这里有一个修复：

#jp_playlist_2_item_0 { 
    display: block; 

我不知道这个问题还有什么，所以这里的工作演示：http://jsfiddle.net/sE4mZ/