在<i>问题中添加<span>元素

Question

$(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.prepend('<i class="fa-solid fa-arrow-up"></i>');
        clickitem.text('Hide Comments');
        clickitem.attr("OnOffStatus", 1);
    }
    else if (onoffstatus == 1) {
        $('[SubCommentsDiv=' + topcommentid + ']').css('display', 'none');
        clickitem.prepend('<i class="fa-solid fa-arrow-down"></i>');
        clickitem.text(labeltext);
        clickitem.attr("OnOffStatus", 0);
    }

});

除了前置代码之外，此代码块可以正常工作。我试图将 i 元素放入 span 元素中，在这个例子中它是 clickitem 变量，但我失败了。

Answer 1

当您调用

clickitem.text()

时，它会替换

clickitem

元素的全部内容，包括您刚刚添加的元素。

这里有一个方法可以解决这个问题：

$(document).on('click', '[showsubcommentsid]', function (e) {
    e.preventDefault();
    var clickitem = $(this);
    var onoffstatus = clickitem.attr("OnOffStatus");
    var hasopennedonce = clickitem.attr("HasOpennedOnce");
    var labeltext = clickitem.attr('label');
    var topcommentid = clickitem.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);
    }
});

Answer 2

使用模板文字并切换

const shouldShow = (onoffstatus === '0' && hasopenedonce === '1');
$(`[SubCommentsDiv=${topcommentid}]`).toggle(shouldShow);

clickitem.html(`<i class="fa-solid fa-arrow-${shouldShow ? 'up' : 'down' }"></i> ${shouldShow ? 'Hide Comments' : labeltext }`);
clickitem.attr("OnOffStatus", onoffstatus ? '1' : '0' );