javascript - 单击即可切换事件和非事件图像

Question

我的页面上的每个“事件”和“非事件”链接都有两个单独的图像。每个链接都会在我的网页上切换不同的文章。

<img src="/img/active.png" />
<img src="/img/inactive.png" />

我最初在页面上显示所有非事件图像，但希望显示与用户点击的链接相对应的事件图像。

注意*每个链接，无论是事件的还是非事件的，都将有一个唯一图像网址

<a href="#">
    <div>
        Click here for foo
        <img src="/img/inactive-123.png" />
    </div> 
</a>

<a href="#">
    <div>
        Click here for bar
        <img src="/img/inactive-345.png" />
    </div> 
</a>

我的页面上可能有 100 多个链接，因此我正在寻找在 jquery 中执行此操作的最有效且可维护的方法。我考虑过用数字索引这些图像，但这很容易导致我的文章之间的关联不正确 - 有什么想法吗？

Answer 1

抱歉，使用的是清晰的 JS，而不是您提到的 JQuery

var tab = document.getElementsByTagName("img");
for (var i = 0; i < tab.length; i++){
    tab[i].addEventListener('click', function () {
            if (this.src.indexOf("inactive") !== -1){
                this.src = this.src.substring(0, this.src.length -12)
                this.src += "active.png"
            }
            else {
                this.src = this.src.substring(0, this.src.length -10)
                this.src += "inactive.png"
            }
    })
}

只要 inactive.png 或 active.png 位于 src 值的末尾，它就可以工作。