在span元素内前置<i>元素功能失效问题求助

你的代码里图标无法正常显示的核心原因是：调用text()方法会完全替换元素内的所有子节点——你先prepend了<i>图标，紧接着用text()设置文字，这会把刚添加的图标直接清空。另外如果要把图标放到clickitem内部的<span>里，需要先定位到该span元素再操作。

修复方案1：保留原有结构，组合图标与文本 #

直接用html()方法一次性设置图标和文本，避免text()清空内容：

$(document).on('click', '[showsubcommentsid]', function (e) {
    e.preventDefault();
    var clickitem = $(this);
    var onoffstatus = $(this).attr("OnOffStatus");
    var hasopennedonce = $(this).attr("HasOpennedOnce");
    var labeltext = $(this).attr('label');
    var topcommentid = $(this).attr("showsubcommentsid");

    if (onoffstatus == 0 && hasopennedonce == 1) {
        $('[SubCommentsDiv=' + topcommentid + ']').css('display', '');
        // 清空原有内容，添加图标+文本
        clickitem.html('<i class="fa-solid fa-arrow-up"></i> Hide Comments');
        clickitem.attr("OnOffStatus", 1);
    }
    else if (onoffstatus == 1) {
        $('[SubCommentsDiv=' + topcommentid + ']').css('display', 'none');
        // 组合图标和原始文本
        clickitem.html('<i class="fa-solid fa-arrow-down"></i> ' + labeltext);
        clickitem.attr("OnOffStatus", 0);
    }
});

修复方案2：将图标插入到内部的元素中 #

如果你的clickitem结构类似<button showsubcommentsid="xxx"><span>显示评论</span></button>，需要把图标放到内部的<span>里，可以这样修改：

$(document).on('click', '[showsubcommentsid]', function (e) {
    e.preventDefault();
    var clickitem = $(this);
    var textSpan = clickitem.find('span'); // 定位内部的span
    var onoffstatus = $(this).attr("OnOffStatus");
    var hasopennedonce = $(this).attr("HasOpennedOnce");
    var labeltext = $(this).attr('label');
    var topcommentid = $(this).attr("showsubcommentsid");

    if (onoffstatus == 0 && hasopennedonce == 1) {
        $('[SubCommentsDiv=' + topcommentid + ']').css('display', '');
        // 移除原有图标避免重复，在span前插入新图标并修改文本
        clickitem.find('i.fa-solid').remove();
        textSpan.before('<i class="fa-solid fa-arrow-up"></i> ');
        textSpan.text('Hide Comments');
        clickitem.attr("OnOffStatus", 1);
    }
    else if (onoffstatus == 1) {
        $('[SubCommentsDiv=' + topcommentid + ']').css('display', 'none');
        // 恢复向下箭头和原始文本
        clickitem.find('i.fa-solid').remove();
        textSpan.before('<i class="fa-solid fa-arrow-down"></i> ');
        textSpan.text(labeltext);
        clickitem.attr("OnOffStatus", 0);
    }
});

额外优化建议 #

• 用toggle()替代手动设置display，代码更简洁：$('[SubCommentsDiv=' + topcommentid + ']').toggle();
• 用data()方法替代attr()读取自定义属性（需把属性名改为data-onoffstatus这类格式），更符合HTML规范。

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