动态生成链接点击后仅首个变色问题求助

问题描述 #

运行时动态生成一批心形链接，期望点击某个链接时该链接变色，但实际点击任意链接时，只有第一个链接的颜色会改变。

原代码 #

@foreach (var item in Model)
{
    <div class="contact-save">
        <a href="#" class="phone_number" id="favorite" onclick="Fav(@item.id)" >
            <i class="fas fa-heart"></i>
        </a>
    </div>
}
<script>
    var btnvar = document.getElementById('favorite')
    function Fav(id) {
        var url = '@Url.Action("ajaxRent", "Home")';
        if(btnvar.style.color == "red"){
            btnvar.style.color = "grey"
        }
        else{
            btnvar.style.color = "red"
        }

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                id: id
            },
            success: function (data) {
                if(data.length == 0) // No errors
                    alert("Fave success!");
            },
            error: function (jqXHR) { // Http Status is not 200
            },
            complete: function (jqXHR, status) { // Whether success or error it enters here
            }
        }); 
    };
</script>

问题根源 #

所有动态生成的链接都用了同一个id="favorite"——HTML规范里id是全局唯一标识，document.getElementById('favorite')只会获取页面中第一个匹配该id的元素，所以不管点击哪个链接，代码始终在修改第一个元素的颜色。

解决方案 #

1. 修改HTML部分

去掉重复的id，在onclick事件中把当前点击的元素（this）作为参数传给函数：

@foreach (var item in Model)
{
    <div class="contact-save">
        <a href="#" class="phone_number" onclick="Fav(@item.id, this)">
            <i class="fas fa-heart"></i>
        </a>
    </div>
}

2. 修改JS函数

接收传入的当前元素，直接操作该元素的样式（或用类名切换更优雅）：

方式一：直接操作行内样式

<script>
function Fav(id, element) {
    var url = '@Url.Action("ajaxRent", "Home")';
    // 直接操作当前点击的元素
    if (element.style.color === "red") {
        element.style.color = "grey";
    } else {
        element.style.color = "red";
    }

    $.ajax({
        url: url,
        type: 'POST',
        data: { id: id },
        success: function (data) {
            if (data.length === 0) alert("Fave success!");
        },
        error: function (jqXHR) {},
        complete: function (jqXHR, status) {}
    }); 
};
</script>

方式二：用类名切换（推荐，样式与逻辑分离）

先添加CSS样式：

.phone_number { color: grey; }
.phone_number.favorited { color: red; }

再修改JS函数：

<script>
function Fav(id, element) {
    var url = '@Url.Action("ajaxRent", "Home")';
    // 切换类名实现颜色变化
    element.classList.toggle("favorited");

    $.ajax({
        url: url,
        type: 'POST',
        data: { id: id },
        success: function (data) {
            if (data.length === 0) alert("Fave success!");
        },
        error: function (jqXHR) {},
        complete: function (jqXHR, status) {}
    }); 
};
</script>

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