JQuery not replacing html

JQuery not replacing html

本文关键字：html replacing not JQuery      更新时间：2023-09-26

这是交易，我有以下jQuery代码，应该将数组值添加到特定 #id，buf它不会替换代码，只会添加更多，我需要一点帮助才能使其在链接单击时替换html。

法典：

function changeClass(curClass){
    switch(curClass){
        case "Schoolgirl":
        case "Fighter":
            var charSkillsNames = ["text1","text2","text4","text5"];
        //loop show array values
        listSkillsNames(charSkillsNames);
        break;
    }
}
function listSkillsNames(arr){
var length = arr.length,
    element = null;
    $("#skills").html(function(){
        for (var i = 0; i < length; i++) {
            element = arr[i];
            $(this).append("<li>"+element+"</li>");
        }
    });
}

这很好用，但是当我单击使其工作的链接时，我需要它替换"#skills"ID中的HTML

PS：问题真的在这里

问题是你没有清空#skills元素的 HTML。使用$("#skills").html("")清空它。

function listSkillsNames(arr){
    var length = arr.length,
    element = null;
    var $skills = $("#skills");
    $skills.html(""); // empty the HTML
    for (var i = 0; i < length; i++) {
        element = arr[i];
        $skills.append("<li>"+element+"</li>"); // append new items
    }
}

问题是因为您始终将新项附加到元素，而不删除现有项。

只需清空skill元素，也无需在此处使用.html(function(){})

function listSkillsNames(arr) {
    var length = arr.length,
        element = null;
    var $skill = $("#skills").empty();
    for (var i = 0; i < length; i++) {
        element = arr[i];
        $skill.append("<li>" + element + "</li>");
    }
}
相关文章：