关于为每个项实现JS与PHP结合的ID绑定及心形图标切换功能的问询

看起来你是想给每个动态生成的项实现独立的心形图标切换功能，原来的代码因为硬编码了单个ID，没法支持多个项。我给你调整两种可行的方案，都能完美实现每个项的ID绑定：

方案1：直接传递当前元素（推荐，更高效） #

这种方式不需要重复查询DOM，直接把点击的元素传给JS函数：

PHP生成的HTML #

<a 
    class="glyphicon glyphicon-heart-empty" 
    style="font-size: 50px;color: red" 
    id="<?php echo $item['id'];?>" 
    onclick="changeH(this)"
></a>

JavaScript函数 #

function changeH(elem) {
    // 检查当前是否是实心心形
    if (elem.classList.contains("glyphicon-heart")) {
        // 切换为空心
        elem.classList.remove("glyphicon-heart");
        elem.classList.add("glyphicon-heart-empty");
    } else {
        // 切换为实心
        elem.classList.remove("glyphicon-heart-empty");
        elem.classList.add("glyphicon-heart");
    }
}

方案2：传递元素ID（适合需要额外使用ID的场景） #

如果你的业务逻辑里需要用到项的ID做其他操作（比如后端交互），可以用这种方式：

PHP生成的HTML #

<a 
    class="glyphicon glyphicon-heart-empty" 
    style="font-size: 50px;color: red" 
    id="<?php echo $item['id'];?>" 
    onclick="changeH('<?php echo $item['id'];?>')"
></a>

JavaScript函数 #

function changeH(itemId) {
    // 获取对应的元素，加个判断避免找不到元素报错
    const targetElem = document.getElementById(itemId);
    if (!targetElem) return;

    // 用replace方法简化类名切换
    if (targetElem.classList.contains("glyphicon-heart")) {
        targetElem.classList.replace("glyphicon-heart", "glyphicon-heart-empty");
    } else {
        targetElem.classList.replace("glyphicon-heart-empty", "glyphicon-heart");
    }
}

关键改进点说明 #

• 移除了原代码中JS函数硬编码的$item['id']，改为通过参数动态传递，确保每个图标点击时操作自己对应的元素
• 使用classListAPI替代直接修改className，避免意外覆盖其他类名（比如后续给图标加额外样式类时不会出问题）
• 方案1减少了DOM查询操作，性能更优；方案2保留了ID的传递，方便后续扩展后端交互（比如点击时发送AJAX请求更新收藏状态）

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