0

CSS スプライトはページの HTML では機能しますが、Javascript では機能しませんか?

http://www.spyka.net/scripts/javascript/easy-social-bookmarksをインストールし、CSS スプライトを追加してサーバー呼び出しを最小限に抑えようとしています。

以下のようなスタイルシートを作成しました。

<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]+'" />&nbsp; ';
        var k = '<a href="'+u+'">'+img+g[1]+'</a>&nbsp;';
        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]+'" />&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;}

これは機能しているようです。

私は今これを機能させています。

下部にあるメインの投稿の更新を参照してください。

このサイトでは数時間自分の回答を投稿できなかったので、そこに更新を書きました。また、誰かの時間を無駄にしたくありませんでした。

建設的なコメントをありがとう、彼らは大いに役立ちました。

4

1 に答える 1

0

生成された 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を参照してください。

于 2012-07-17T11:44:40.790 に答える