javascript - Jquery 不能与 ajax 一起工作？

Question

我有一个动态 div，它将根据 json 数据进行更改。我尝试在“for 循环”中使用 jquery 来控制此 div 的内容，但它不起作用？
有人可以给我一些线索和一些关于如何更正代码的想法吗？

$.ajax({
    type: "POST",
    url: 'http://192.168.12.230/XXXX/XXX',
    dataType: 'json',
    contentType: "application/json",
    success: function (data) {
        console.log(data);

        var projectList = "<ul style='list-style:none;'>"

        for (var i = 0; i < data.d.length; i++) {
            projectList += "<li>" +
              "<div class='location'>" +
                "<p>Sounth Africa</p>" +
              "</div>" +
                  "<div class='status'>" +
                      "<div class='status_circle'></div>" +
                      "<p>in raising</p>" +
                  "</div>" +
             "</li>"

            $(".category p").append(data.data[i].categoryName);

            if (data.data[i].raisingStatus == 1) {
                $(".status p").html("in raising");
                $(".status_circle").css("background-color", "#32C832");
            } else if (data.data[i].raisingStatus == 0) {
                $(".status p").html("stop raising");
                $(".status_circle").css("background-color", "#CD3C14");
            }
        }
        projectList += "</ul>";
        $('#projectList').append(projectList);


    },
    error: function () {
        alert("error");
    }
});

顺便问一下，不是在javascript中导入HTML代码，有没有什么想法可以不使用HTML代码来实现这个功能？

非常感谢:)

Answer 1

if (data.data[i].raisingStatus == 1) {
  $(".status p").html("in raising");
  $(".status_circle").css("background-color", "#32C832");
} else if (data.data[i].raisingStatus == 0) {
  $(".status p").html("stop raising");
  $(".status_circle").css("background-color", "#CD3C14");
}

在添加到 dom 之前，您不能填充 dom $(".status p")。$('#projectList').html(projectList);

您可以像这样使用 html 代码添加 css 和文本。

if (data.data[i].raisingStatus == 1) {
  projectList += "<div class='status'>in raising</p>";
  var style = "background-color:#32C832";
  projectList += "<div class='status_circle' style='"+style+"'></div>";

} else if (data.data[i].raisingStatus == 0) {
  projectList += "<div class='status'>stop raising</p>";
  var style = "background-color:#CD3C14";
  projectList += "<div class='status_circle' style='"+style+"'></div>";
}

对于你的第二个问题，是的，html js 和 css 都是乱七八糟的。您可以创建一个 html 变量并将其替换为更清晰代码的参数

for (var i = 0; i < data.data.length; i++) {

 var status = "";
 var style = "";  
if (data.data[i].raisingStatus == 1) {
 status = "in raising";
 style = "background-color:#32C832";  
} else if (data.data[i].raisingStatus == 0) {
 status = "stop raising";
 style = "background-color:#CD3C14";  
}
var projectList="<li><div class='location'><p>Sounth Africa</p></div><div class='status'>
    <div class='status_circle' style='{0}'></div><p>{1}</p></div></li>".format(style, status);
}

String.prototype.format = function() {
    var formatted = this;
    for (var i = 0; i < arguments.length; i++) {
        var regexp = new RegExp('\\{'+i+'\\}', 'gi');
        formatted = formatted.replace(regexp, arguments[i]);
    }
    return formatted;
};