我的页面上的每个“事件”和“非事件”链接都有两个单独的图像。每个链接都会在我的网页上切换不同的文章。
<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 中执行此操作的最有效且可维护的方法。我考虑过用数字索引这些图像,但这很容易导致我的文章之间的关联不正确 - 有什么想法吗?
最佳答案
抱歉,使用的是清晰的 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 值的末尾,它就可以工作。
关于javascript - 单击即可切换事件和非事件图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41601563/