使用javascript在href中更改img src

Question

我有以下html：

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

基本上，我希望翻转函数将其中包含的img的src替换为按下时微笑 - 非活动状态，如果现在已经在smile-inactive.png中，则将其再次更改为smile.png。如果我不想给img一个id，我怎么能这样做而不必做document.getElementById？

Answer 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];

Answer 2

拍摄两张图像，将它们合并为一张图像，然后使用偏移量来确定显示哪一张图像 你可以通过CSS完成它。