Javascript onclick 与 onmouseover 和 onmouseout

Question

我有一张图片，上面有几个 javascript 调用，大部分都可以正常工作。

基本上，我想要它做的是，当单击交换图像时，然后根据它当前所在的图像，也可以在鼠标悬停时交换。

这是我的 HTML：

<a href="#show" class="show_hide">
<img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" onclick="changeImage()" onMouseOver="checkMouseOver()" onMouseOut="checkMouseOut()" /></a>

还有我的 Javascript：

function changeImage() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg";
    } else {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
    }
}

function checkMouseOver() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow-over.jpg";
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow-over.jpg";    
    }
}

function checkMouseOut() {
    if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-less-arrow-over.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-less-arrow.jpg";
    } else if (document.getElementById("clicktoggleimage").src == "http://www.pete.com/images/show-more-arrow-over.jpg") {
        document.getElementById("clicktoggleimage").src = "http://www.pete.com/images/show-more-arrow.jpg"; 
    }
}

这工作正常，除非第二次单击按钮时，图像不会恢复为 show-less-arrow.jpg

非常感谢您的帮助

Answer 1

你可以让这个 JS 更有效率。

因为看起来你只是用'less' 替换'more'，反之亦然，在你的changeImage 函数中，这正是你的函数应该做的。鼠标悬停/关闭只是切换字符串的'-over' 部分。

所以，从你的 HTML 中移除事件监听器：

<a href="#show" class="show_hide">
    <img src="<?php echo WEB_URL; ?>/images/show-more-arrow.jpg" width="61" height="45" id="clicktoggleimage" />
</a>

并使用这个 Javascript：

var img = document.getElementById("clicktoggleimage");

function changeImage() {
    if (img.src.indexOf('less') == -1) {
        img.src = img.src.replace('more', 'less');
    } else {
        img.src = img.src.replace('less', 'more');
    }
}

function hoverImage() {
    if (img.src.indexOf('arrow-over') == -1) {
        img.src = img.src.replace('arrow', 'arrow-over');
    } else {
        img.src = img.src.replace('arrow-over', 'arrow');
    }
}

img.onclick = cangeImage;
img.onmouseover = img.onmouseout = hoverImage;