javascript - jQuery 图像交换 if else

Question

我正在尝试使用 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>

Answer 1

您的 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);
});