点击帖子点赞按钮后内部glyphicon图标消失该如何修复？

算力阿峰

2026-9-25

问题原因

你在点击事件中直接通过`innerHTML`重写了按钮的全部内容，原本按钮内包含的点赞图标`<i class="glyphicon glyphicon-thumbs-up"></i>`被纯数字覆盖，因此图标消失。

修复方案

方案1（推荐）：单独封装点赞数容器，避免修改整体DOM

先修改按钮HTML结构，给点赞数单独套一层带唯一ID的<span>标签：

<button id="likebtn" type="button" 
        class="btn btn-sml btn-danger" style="width:70px;">
    <i class="glyphicon glyphicon-thumbs-up"> </i> 
    <span id="like-count"><?php echo $post_likes; ?></span>
</button>

再修改JS代码，仅更新点赞数容器的内容，不触碰图标部分：

let likebtn = document.querySelector('#likebtn');
let likeCount = document.querySelector('#like-count');
likebtn.addEventListener('click', () => {
    // 更新点赞数，直接读取当前显示数值加1即可，不需要依赖后端输出的初始值
    let newLikes = parseInt(likeCount.textContent) + 1;
    likeCount.textContent = newLikes;
    
    likebtn.disabled = true;
    likebtn.style.opacity = 0.5;
});

方案2：不改HTML，更新innerHTML时保留图标标签

如果不想调整原有HTML结构，直接修改JS的innerHTML赋值逻辑，把图标标签也拼接进去：

let likebtn = document.querySelector('#likebtn');
likebtn.addEventListener('click', () => {
    let newLikes = <?php echo $post_likes; ?> + 1;
    // 重写内容时带上图标标签
    likebtn.innerHTML = `<i class="glyphicon glyphicon-thumbs-up"></i> ${newLikes}`;
    
    likebtn.disabled = true;
    likebtn.style.opacity = 0.5;
});