在列表中循环并根据项目的长度设置项目的颜色不起作用

Looping in a list and setting colors on items according the length of the items is not working

本文关键字：项目 设置 不起作用 颜色 列表 循环      更新时间：2023-09-26

我有一个问题，我的代码应该检查列表中项目的长度并设置颜色，如果项目长于6，该项目的颜色应该为红色否则为蓝色，但它返回所有项目红色。

    function onS() {
    var item = "";
    var itemLength = 0;
    var Enum = listItems.getEnumerator();
    while (Enum.moveNext()) {
        var currentItem = Enum.get_current();
        item += "<br/>" + currentItem.get_item("Title");
        if (item.length > itemLength) {
            itemLength = item.length;
            if (itemLength > 6) {
                document.getElementById("items").style.color = "red";
            }
            else
            {
                document.getElementById("items").style.color = "blue";
            }
        }
        $("#items").html(item);
    }   
}

with

var itemLength = 0;
while ... {
   if (item.length > itemLength) {
        itemLength = item.length;

您说只有当当前条目比前一个条目长时才会进入循环。因此，如果您的第一个项目是最大长度，您将永远不会进入任何其他项目的循环。

你也写了

document.getElementById("items").style.color = "red";

这意味着只有一个id="items"的元素，因为id必须是唯一的。所以换一种颜色这么多次是没有意义的。你可能想这样做:

$(item).style.color = "red";

您似乎遗漏了一些代码，这使得测试很烦人。我认为问题是关于这个的:

item += "<br/>" + currentItem.get_item("Title");

你确定currentItem.get_item("Title")。长度+ "
"。长度不总是大于6?

你可以把它改成只看currentItem.get_item("Title").length

document.getElementById("items")设置id为"items"的DOM节点的所有子节点的文本颜色。

我想你想要依次只指定由item变量设计的DOM节点的颜色。

您需要将此项目放在单独的节点中，例如span，然后设置该节点的样式颜色。这显然会影响您测量的长度。但我觉得你实际上想要看的是项目标题的长度，而不是像你在这里做的那样，items的整个html代码的长度。

var items = $("#items");
var itemLength = 0;
while (Enum.moveNext()) {
  var currentItem = Enum.get_current();
  var title = currentItem.get_item("Title");
  var currentItemNode = $("<span>" + title + "</span>");
  items.append("<br/>");
  items.append(currentItemNode);
  if (title.length > itemLength) {
    itemLength = item.length;
    if (itemLength > 6) {
        currentItemNode.css("color", "red");
    } else {
        currentItemNode.css("color", "blue");
    }
  }
}

我已经修好了。谢谢你的帮助!

function onS() {
var item = "";
var item1 = "";
var Enum = listItems.getEnumerator();
while (Enum.moveNext()) {
    var currentItem = Enum.get_current();
    if(currentItem.get_item("Title").length>6){
        document.getElementById("items").style.color = "red";
        item += "<br/>" + currentItem.get_item("Title");
    }
    else {
        document.getElementById("items1").style.color = "blue";
        item1 += "<br/>" + currentItem.get_item("Title");
    }
 }
$("#items").html(item);
$("#items1").html(item1);
相关文章：