使用javascript更改href内的img src答案

【问题标题】：changing img src inside a a href using javascript使用javascript更改href内的img src
【发布时间】：2012-02-16 22:24:08
【问题描述】：

我有以下html：

<li>
   <a href=\"p://emotion/appreciate\" onclick=\"flip()\">
        <img src=\"smile.png\" />
   </a>
</li>

基本上，我希望翻转功能在按下时将其中包含的 img 的 src 替换为smile-inactive，如果它现在已经在smile-inactive.png 中，则再次将其更改回smile.png。如果我不想给 img 一个 id，我怎样才能做到这一点而不必做 document.getElementById？

【问题讨论】：

这是一个像 jQuery 这样的框架可以真正帮助完成的任务。浏览器兼容性将为您节省大量时间和头痛。
为什么不给图片一个ID？

标签： javascript

【解决方案1】：

在您的翻转函数中，我会确保 this 指向您刚刚单击的锚点，然后将 img 作为第一个 childNode：

<a href=\"p://emotion/appreciate\" onclick=\"flip.call(this)\">

function flip(){
    var img = this.children[0];
    if (/smile\.png/.test(img.src))
        img.src = "smile-inactive.png";
    else
        img.src = "smile.png"
}

编辑

正如@am not i am 指出的那样，您可以通过切换来稍微提高浏览器支持

var img = this.children[0];

到

var img = this.getElementsByTagName("img")[0];

【讨论】：

啊，你修复了我要建议的两个更正。 +1 但更正确一点，我会在正则表达式中转义 . 。不过应该不会产生实际影响。
@amnotiam - 确实 - 逃脱了。是的，我忘了 childNodes 也给你文本节点，而 children 只给你“好东西”:) -- 我不是你的 dom ninja！
我不是 DOM 忍者...我只是在 StackOverflow 上玩一个。也就是说，您可以使用 getElementsByTagName 而不是 children 获得更多浏览器支持，但实际上您只是获得 FF3，所以谁在乎呢。
...喜欢你使用.call() BTW。
@amnotiam - 是的，我们已经进行了对话 - 将 this 作为参数传递真是太俗气了。顺便说一句 - 恭喜你的代表 - 看起来我们很快就会在这里欢迎你加入 10K 俱乐部

【解决方案2】：

获取两张图片，将它们合并为一张，然后使用偏移量来确定显示哪一张。
你可以通过简单的CSS来做到这一点。

【讨论】：

CSS 对点击事件没有帮助。如果我们谈论的是:hover，我完全同意。
我知道你的意思，我也同意，只是想防止加载两个不同的图像。
是的，这仍然是个好主意。只需要一点 JS 来交换一个类。