0

CSS スプライトと、jQuery によって動的に設定されるクリック ハンドラーを含む DIV の組み合わせを使用して、いくつかのアイコン/ボタンを設定するのに少し問題があります。

DIV を並べて配置し、jQuery を使用して動的にそれぞれのクリック ハンドラーを作成していると思いますが、代わりに、さらに右にある DIV が左にある DIV のクリック ハンドラーを何らかの方法で取得することがわかりました。私が彼らに持たせようとしているハンドラーに加えて。したがって、たとえば、「メール」リンクに使用する予定のクリック ハンドラーは、新しいメールを開始するだけでなく、YouTube チャンネルと LinkedIn プロファイルも開いています。これらの他の機能のボタンとして機能する DIV は、その左。この動作の原因を特定できる人はいますか?

これが私のコードです：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .icon
        {
            height: 68px;
            width: 56px;
            background-image: url('https://lh4.googleusercontent.com/-HylbRS7gQyA/UVbSTXQYs5I/AAAAAAAAAs8/5J8Ij9mr_qk/s800/CommsIconsCSSSprites.png');
            position: relative;
            cursor:hand; cursor:pointer;
        }

        .youTube
        {
            background-position: 0px 0px;
            background-color:yellow;
        }

        .linkedIn
        {
            background-position: -56px 0px;
            left:56px;
            background-color:green;
        }

        .email
        {
            background-position: -112px 0px;
            left:56px;
            background-color:blue;
        }

        .rss
        {
            background-position: -168px 0px;
            left:56px;
            background-color:red;
        }
    </style>

    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function setCommsIcons() {
            $("#youTubeIcon").click(function () { window.open("http://www.youtube.com/user/RPPdotNet?feature=watch"); });
            $("#linkedInIcon").click(function () { window.open("http://www.linkedin.com/in/rachelppierson"); });
            $("#emailIcon").click(function () { window.location.href = "mailto:rachel.pierson@hotmail.co.uk"; });
            $("#rssIcon").click(function () { window.open("http://feeds.feedburner.com/RachelPiersonWorkInProgress"); });
        }

        function shiftImagesJustToSuitIE() {
            // Move the images up a fraction in i.e. to match other browsers
            if ($.browser.msie) {
                $.each($("#youTubeIcon, #linkedInIcon, #emailIcon, #rssIcon"), function (i, val) {
                    with (val) { val.style.pixelTop = val.style.pixelTop + 30; }
                });
            }
        }

        $(document).ready(function () {
            setCommsIcons();
            shiftImagesJustToSuitIE();
        });

    </script>

    <title></title>
</head>
<body>
    <div id="youTubeIcon" class="icon youTube" />
    <div id="linkedInIcon" class="icon linkedIn" />
    <div id="emailIcon" class="icon email" />
    <div id="rssIcon" class="icon rss" />
</body>
</html>

注意:

  • DIV の色付きの背景は、うっかり幅を広げすぎて互いに重なってしまっていないことを確認するためのものです。
  • 関連するコードは、テスト目的で独自の HTML ページに分離されています。それは実際にはまったく別の場所に住んでいます。たとえば、jQuery への参照を含むマスター ページがあります。表示されている HTML の例のように、この 1 ページだけに追加されるわけではありません。このバグを分離する目的で、上記の HTML を分離しました。上記のコードをそのまま切り取って HTML ページに貼り付けると、上記のコードが実行され、説明されているバグが発生するはずです。
4

2 に答える 2

2

これは、div を自己クローズしており、クリック ハンドラーがターゲット内に含まれるすべての div に適用されているために発生しています。それらを適切に閉じるように変更すると、問題が修正されます。

マークアップが実際にどのようにレンダリングされるか:

<div id="youTubeIcon" class="icon youTube">
    <div id="linkedInIcon" class="icon linkedIn">
        <div id="emailIcon" class="icon email">
            <div id="rssIcon" class="icon rss">
            </div>
        </div>
    </div>
</div>

マークアップの書き方:

<div id="youTubeIcon" class="icon youTube"></div>
<div id="linkedInIcon" class="icon linkedIn"></div>
<div id="emailIcon" class="icon email"></div>
<div id="rssIcon" class="icon rss"></div>
于 2013-03-30T14:29:32.560 に答える
1

結論として、他の誰かがこの同じ問題に遭遇した場合に備えて. 速度のために、最初のバグが修正された後に発生した書式設定の問題を修正するために、DIV を使用し、CSS を介してインライン ブロックを表示することにしました。最終的なコードは次のようになりました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .icon
        {
            height: 68px;
            width: 56px;
            background-image: url('https://lh4.googleusercontent.com/-HylbRS7gQyA/UVbSTXQYs5I/AAAAAAAAAs8/5J8Ij9mr_qk/s800/CommsIconsCSSSprites.png');
            position: relative;
            cursor:hand; cursor:pointer;
            display: inline-block;
            *display: inline;   /* just for Internet Explorer */
            zoom: 1;            /* just for Internet Explorer */
        }

        .youTube { background-position: 0px 0px; }

        .linkedIn { background-position: -56px 0px; }

        .email { background-position: -112px 0px; }

        .rss { background-position: -168px 0px; }
    </style>

    <script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        function setCommsIcons() {
            $("#youTubeIcon").click(function () { window.open("http://www.youtube.com/user/RPPdotNet?feature=watch"); });
            $("#linkedInIcon").click(function () { window.open("http://www.linkedin.com/in/rachelppierson"); });
            $("#emailIcon").click(function () { window.location.href = "mailto:rachel.pierson@hotmail.co.uk"; });
            $("#rssIcon").click(function () { window.open("http://feeds.feedburner.com/RachelPiersonWorkInProgress"); });
        }

        $(document).ready(function () {
            setCommsIcons();
        });

    </script>

    <title></title>
</head>
<body>
    <div id="youTubeIcon" class="icon youTube"></div>
    <div id="linkedInIcon" class="icon linkedIn"></div>
    <div id="emailIcon" class="icon email"></div>
    <div id="rssIcon" class="icon rss"></div>
</body>
</html>

jQuery はクリック ハンドラーを追加するだけなので、間違いなく jQuery を使用するべきではありません。私が jQuery を使用しているという事実は、単にクリック ハンドラーを設定するだけでなく、jQuery がはるかに多くのことを行っていた開発時点からの単なるレガシーの問題です。

于 2013-03-30T15:18:51.980 に答える