CSS Sprites在頁面的HTML中工作，但不在Javascript中？

Question

CSS Sprites正在頁面的HTML中工作，但不是在Javascript中？

我正在嘗試安裝http://www.spyka.net/scripts/javascript/easy-social-bookmarks並添加CSS Sprites以儘量減少服務器調用。

我創建的樣式表是這樣的：

<style type="text/css"> 
<!-- 
.i_blinklist 
{ 
width:21px; 
height:21px; 
background-repeat: no-repeat; 
background-image: url(img_socialsprites.jpg); 
background-position: 0 0; 
} 
.i_blogmarks 
//--> 
</style> 

此代碼在頁面像這樣的HTML：

<div class=i_blinklist></div> 

當我把它添加到這樣的JavaScript，它不「T工作：

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class=i_blinklist></div>'); 

這裏是腳本的主要運作這也可能會影響它：

function swgbookmarks() 
{ 
    for(i = 0; i < sites.length; i++) 
    { 
     var g = sites[i]; 
     var u = g[0]; 
     u = u.replace('{url}', escape(window.location.href)); 
     u = u.replace('{title}', escape(window.document.title)); 
     var img = (imagepath == '0') ? '' : '<img src="'+g[2]+'" alt="'+g[1]+'" />&nbsp; '; 
     var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;'; 
     window.document.write(html_before+k+html_after);     
    } 
} 

任何想法或幫助非常感謝。

謝謝。

UPDATE：

我一直在玩弄這一點，終於拿到了它的工作：O）

下面是我所做的更改。

社會書籤和圖像JS代碼：

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', 'socialsprite social blinklist'); 

這是從劇本的基礎JS代碼：

function swgbookmarks() 
{ 
    for(i = 0; i < sites.length; i++) 
    { 
     var g = sites[i]; 
     var u = g[0]; 
     u = u.replace('{url}', escape(window.location.href)); 
     u = u.replace('{title}', escape(window.document.title)); 
     var img = (imagepath == '0') ? '' : '<img src="transparent1x1.gif" class="'+g[2]+'" alt="'+g[1]+'" />&nbsp; '; 
     var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;'; 
     window.document.write(html_before+k+html_after);     
    } 
} 

這裏是CSS樣式表代碼：

<style type="text/css"> 
<!-- 
.socialsprite {background:url(img_socialsprites.jpg);} 
    .social {height:22px;} 
    .social {width:22px;} 

     /* Social Images */ 
.blinklist {background-position:0px 0px;} 
.blogmarks {background-position:0px -22px;} 

這似乎是工作。

---

我現在有這個工作。

查看主帖在底部更新。

我在那裏寫了更新，因爲該網站不會讓我發佈自己的答案几個小時，我不想浪費任何人的時間。

謝謝你的建設性意見，他們幫了很多。

Answer 1

看看生成的HTML。它看起來像你的周圍是否缺少類的名稱一些報價：

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class=i_blinklist></div>'); 

應該

sites[0] = new Array('http://blinklist.com/index.php?Action=Blink/addblink.php&Url={url}', 'Blinklist', '<div class="i_blinklist"></div>'); 

---

** 編輯 ** 此外，登錄變量 「K」 的控制檯「console.log（k）」並驗證html。它會生成下面的，這也是不正確的。請注意您的IMG SRC等於一個div，而不是實際的路徑：

<a href="http://blinklist.com/index.php?Action=Blink/addblink.php&Url=http%3A//fiddle.jshell.net/_display/"><img src="<div class="i_blinklist"></div>" alt="Blinklist" />&nbsp; Blinklist</a>&nbsp; 

從我可以告訴，你應該使用類似：

var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;'; 

隨着產生：

<a href="..."><div class="i_blinklist"></div>&nbsp; Blinklist</a>&nbsp; 

最後一點需要注意的是，您應該使用範圍而不是在您的定位標記中使用div。再次，這不是有效的HTML。有關更多信息，請參閱https://stackoverflow.com/a/1828032/1220302。