Javascript jQuery图像交换（如果有）

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

var images=新数组（）；
var comic=document.getElementById（“comicssubsite”）.src；
var artwork=document.getElementById（“artworksubsite”）.src；
var about=document.getElementById（“aboutsubsite”）.src；
图像[0]=“/images/SiteDesign/Comics\u subsites\u hover.png”；
图片[1]=“/images/SiteDesign/Comics_subsites.png”；
图片[2]=“/images/sitesign/Artwork\u subsites\u hover.png”；
图片[3]=“/images/SiteDesign/Artwork_subsites.png”；
图片[4]=“/images/SiteDesign/About_subsites_hover.png”；
图片[5]=“/images/SiteDesign/About_subsites.png”；
函数onHover（）{
如果（漫画）{
$（“#ComicSubsite”）.attr（'src'，images[0]）；
}
else if（艺术品）{
$（“#artworksubsite”）.attr（'src'，images[2]）；
}
否则，如果（关于）{
$（“#aboutsbsite”）.attr（'src'，images[4]）；
}
}
函数offHover（）{
如果（漫画）{
$（“#comicssubsite”）.attr（'src'，images[1]）；
}
else if（艺术品）{
$（“#artworksubsite”）.attr（'src'，images[3]）；
}
否则，如果（关于）
$（“#aboutsubsite”）.attr（'src'，images[5]）；
}
}

HTML（代码片段）

为什么不使用

css

（哦，图像的背景图像）

请注意，您的标记无效，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'
    })
})

---

您的第一个

if

语句总是返回

true

，因为每个图像标记都有一个源

如果您有：

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

然后这个：

if (comic) {
//code
}

---

if语句所做的一切就是检查comic是否存在，它确实存在。

if语句检查相应元素的

src

属性是否不为空。这并不是你真正想要的——他们总是会被执行的。此外，如果您决定在任何地方使用jQuery，尤其是在事件处理等DOM方面，您都应该使用jQuery

使用数组作为数据结构是一个很好的开始，但仍然是徒劳的，因为您仍然手动而不是通过编程来寻址项。使用对象[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);
});

---

如果要使用jQuery，还应将其用于

悬停

事件，例如

$（'img#comicsubsite'）。hover（）

您在上一次

中缺少了一个大括号，如果
css似乎是最佳选择的话。谢谢@Growler不客气，如果你想使用css，你应该选择另一个元素，比如div元素。我非常喜欢这种方法。你能解释一下我是如何像上面那样将其与HTML集成的吗？我尝试过使用css，但我不喜欢它的工作方式。尽管css可能是这里更好的选择，但我必须+1才能完美地使用jQuery@咆哮者：应该马上就可以了。请确保前面包含jQuery文件，您可以从图像标记中删除这些内联事件处理程序属性。@PeteUh：实际上，它并不在任何地方都使用jQuery（如上所述），而是仅在需要跨浏览器一致性时才使用jQuery。我不喜欢
$（this）.attr（）
：-）@Bergi-Hmm。。。似乎没有交换：/
if (comic) {
//code
}

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