Query loop场景下点击切换链接文本仅最后一项生效如何解决

问题原因 #

你遇到的问题核心是同名函数重复定义被覆盖：

• 你在for循环内部每次都声明了一个名为change的全局函数，后声明的函数会直接覆盖之前的同名函数
• 每个change函数内硬编码了当次循环的{{i.id}}，最终全局只剩最后一次循环渲染出来的change函数，自然所有点击操作只会修改最后一个元素的内容

最优解决方案 #

不需要为每个条目单独生成函数，也不需要依赖id获取元素，直接把当前点击的元素作为参数传入函数即可，调整后代码如下：

1. 把script块移到循环外，全局只定义一次切换函数：

function change(elem) {
    elem.innerHTML = elem.innerHTML === "Fav" ? "Unfav" : "Fav";
}

2. 循环内的a标签修改为直接传当前元素本身，不需要写id属性：

{% for i in objetos %}
...
<a onclick="change(this)">Fav</a>
...
{% endfor %}

其他可选方案 #

如果你确实需要用到条目id做其他扩展操作，也可以把id作为参数传入函数，写法如下：
循环内a标签：

<a onclick="change({{i.id}})" id="{{i.id}}">Fav</a>

全局函数：

function change(id) {
    var elem = document.getElementById(id);
    elem.innerHTML = elem.innerHTML === "Fav" ? "Unfav" : "Fav";
}

内容的提问来源于stack exchange，提问作者andrew