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。