CSS Sprite 在页面的 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 时,它不起作用:
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]+'" /> ';
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
window.document.write(html_before+k+html_after);
}
}
非常感谢任何想法或帮助。
谢谢。
更新:
我一直在玩这个,终于让它工作了: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]+'" /> ';
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
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;}
这似乎有效。
我现在可以正常工作了。
请参阅底部的主要帖子更新。
我在那里写了更新,因为网站在几个小时内不允许我发布自己的答案,而且我不想浪费任何人的时间。
感谢您的建设性意见,他们帮助了很多。
最佳答案
查看生成的 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" /> Blinklist</a>
据我所知,你应该使用类似的东西:
var k = '<a href="'+u+'">'+img+g[1]+'</a> ';
生成:
<a href="..."><div class="i_blinklist"></div> Blinklist</a>
最后要注意的是,您应该在 anchor 标记内使用 span 而不是 div。同样,这不是有效的 HTML。参见 https://stackoverflow.com/a/1828032/1220302获取更多信息。
关于javascript - CSS Sprites 在页面的 HTML 中有效,但在 Javascript 中无效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11521748/