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.. 并使用hover和attr方法。

$('.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相应元素的属性是否不为空。这并不是你真正想要的——它们总是会被执行。此外，如果您决定使用 jQuery，您应该在任何地方都使用它，尤其是在事件处理等 DOM 方面。

将数组用作数据结构是一个好的开始，但由于您仍然手动而不是以编程方式处理这些项目，因此毫无用处。使用对象 [literal] 作为键值映射来通过图像 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 回答