javascript – Jquery不使用ajax？

我有一个动态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代码的情况下实现这个功能？

非常感谢：)

解决方法

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 $(“.status p”)直到添加到dom.$(‘#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;
};