2

javascript/jqueryを使用して基本的な画像スワップを作成しようとしています。

何らかの理由で、if/elseステートメントが正しく実行されていません。私はこれを間違って使用していますか？

ありがとう

Javascript：

    <script type="text/javascript">
        var images = new Array();
        var comic = document.getElementById("comicssubsite").src;
        var artwork = document.getElementById("artworksubsite").src;
        var about = document.getElementById("aboutsubsite").src;

        images[0] = "./images/SiteDesign/Comics_subsites_hover.png";
        images[1] = "./images/SiteDesign/Comics_subsites.png";

        images[2] = "./images/SiteDesign/Artwork_subsites_hover.png";
        images[3] = "./images/SiteDesign/Artwork_subsites.png";

        images[4] = "./images/SiteDesign/About_subsites_hover.png";
        images[5] = "./images/SiteDesign/About_subsites.png";

        function onHover() {
            if (comic) {
            $("#comicssubsite").attr('src', images[0]);
            }
            else if (artwork) {
            $("#artworksubsite").attr('src', images[2]);
            }
            else if (about) {
            $("#aboutsubsite").attr('src', images[4]);
            }
        }
        function offHover() {
            if (comic) {
            $("#comicssubsite").attr('src', images[1]);
            }
            else if (artwork) {
            $("#artworksubsite").attr('src', images[3]);
            }
            else if (about)
            $("#aboutsubsite").attr('src', images[5]);
            }
        }

    </script>

HTML（スニペット）

            <div class="span2">
                <div id="pages">
                    <span class="pageitems" ><a href="./?action=homepage&page=1&site=comics"><img id="comicssubsite" src="./images/SiteDesign/Comics_subsites.png" alt="comics bg" onmouseover="onHover();" onmouseout="offHover();"/></a></span>
                </div>
            </div>
            <div class="span2">
                <div id="pages">
                    <span class="pageitems"><a href="./?action=homepage&page=1&site=artwork"><img id="artworksubsite" src="./images/SiteDesign/Artwork_subsites.png" alt="artwork bg" onmouseover="onHover();" onmouseout="offHover();"/></a></span>    
                </div>
            </div>
            <div class="span2">
                <div id="pages">
                    <span class="pageitems"><a href="./?action=homepage&page=1"><img id="aboutsubsite" src="./images/SiteDesign/About_subsites.png" alt="about bg" onmouseover="onHover();" onmouseout="offHover();"/></a></span>
                </div>
            </div>
4

3 に答える 3

3

css（おっと、画像の背景画像）を使用しないのはなぜですか？

#comicssubsite {
   background-image: ...
}

#comicssubsite:hover {
   background-image: ...
}

マークアップが無効であることに注意してください。IDは一意である必要があります。IDの代わりにクラスを使用する必要があります。IDをComics、 Artwork..およびhoveruseandattrメソッドに変更することもできます。

$('.pages img').hover(function(){
    $(this).attr('src', function(i, src){
       return src.indexOf('hover')
       ? './images/SiteDesign/'+this.id+'_subsites.png'
       : './images/SiteDesign/'+this.id+'_subsites_hover.png'
    })
})
于 2012-11-11T22:59:52.450 に答える
3

ifステートメントsrcは、それぞれの要素の属性が空でないことを確認します。それは本当にあなたが望むものではありません-彼らは常に実行されます。また、特にイベント処理などのDOMで使用することにした場合は、どこでもjQueryを使用する必要があります。

データ構造として配列を使用することは良いスタートですが、プログラムではなく手動で項目に対処するため、まったく役に立ちません。オブジェクト[literal]をKey-Value-Mapとして使用して、画像IDでURLを取得します。

jQuery(document).ready(function($) {
    var images = {
        "comicssubsite": [
            "./images/SiteDesign/Comics_subsites_hover.png",
            "./images/SiteDesign/Comics_subsites.png"
        ],
        "artworksubsite": [
            "./images/SiteDesign/Artwork_subsites_hover.png",
            "./images/SiteDesign/Artwork_subsites.png"
        ],
        "aboutsubsite": [
            "./images/SiteDesign/About_subsites_hover.png",
            "./images/SiteDesign/About_subsites.png"
        ]
    };
    function mouseover(e) {
        if (this.id in images) // check for key in map
            this.src = images[this.id][0];
    }
    function mouseout(e) {
        if (this.id in images)
            this.src = images[this.id][1];
    }
    $("#comicssubsite, #artworksubsite, #aboutsubsite").hover(mouseover, mouseout);
    // You might want to use a loop instead, then you don't need to write the ids twice:
    // for (var id in images)
    //     $('#'+id).hover(mouseover, mouseout);
});
于 2012-11-11T23:13:25.213 に答える
2

各画像タグにはソースがあるため、最初のifステートメントは常に返されます。true

あなたがこれを持っているなら：

var comic = document.getElementById("comicssubsite").src;

そしてこれ：

if (comic) {
//code
}

ifステートメントが実行しているのは、コミックが存在することを確認することだけです。

于 2012-11-11T23:01:01.553 に答える