Question

我有一个网络应用程序，可以将函数的结果输出为double。该函数比较两个文本文档并返回指示两个文档之间相似性百分比的百分比。当用户单击“比较”按钮时，该函数将运行并将用户从compare.jsp页面带到results.jsp页面，并显示一个如下所示填充的加载栏：

<div id="levenshtein-distance"
     class="ldBar label-center levenshtein-distance"
     data-preset="fan"
     data-value="${result.percentage}"
     data-stroke="">
</div>

这很好用，风扇栏获得正确的百分比。但是，我还尝试使用基于此百分比的数据笔划值为扇形条着色。我有一个简单的javascript函数来执行此操作，但无法弄清楚如何传递该值。我尝试使用＆＃34; onload＆＃34;在results.jsp页面的body标签中运行该函数，但这不起作用。这是我的JavaScript函数：

function barSetLD(percent) {
  var red = "red";
  var green = "green";
  var orange = "orange";

  var elem = document.getElementById("levenshtein-distance");

  if (percent <= 40.00) {
    elem.setAttribute("data-stroke", green);
  } else if (percent > 40.00 && percent <= 70.00) {
    elem.setAttribute("data-stroke", orange);
  } else {
    elem.setAttribute("data-stroke", red);
  }
}

我已经做了很多搜索，似乎无法找到一个帮我解决这个问题的例子。非常感谢任何帮助。

////更新：

Trinh，这有助于改变颜色，谢谢！我现在的问题是，我确实有多个levenshtein-distance＆＃39; ids，我正在循环它们。所以目前所有东西都被设置为相同的颜色。我最初应该提到这个，抱歉。我正在比较多对文件并输出每对的加载条。如果您对如何解决循环问题有一些了解，那将是很好的，但无论如何都要感谢原始解决方案！我更新了我的javascript函数，如下所示：

function barSetLD(percent) {
var red = "red";
var green = "green";
var orange = "orange";

var elem = document.querySelectorAll("[id^=levenshtein-distance]");

for (var i in elem) {
    if (percent <= 40.00) {
        elem[i].setAttribute("data-stroke", green);
    } else if (percent > 40.00 && percent <= 70.00) {
        elem[i].setAttribute("data-stroke", orange);
    } else {
        elem[i].setAttribute("data-stroke", red);
    }
}

}

使用html循环的完整代码是，我现在正如您所建议的那样在页面的最底部调用barSetLD（百分比）：

<c:forEach items="${studentResults}" var="result" varStatus="loop">
    <div id="levenshtein-distance"
         class="ldBar label-center levenshtein-distance"
         data-preset="fan" 
         data-value="${result.percentage}">
    </div>
</c:forEach>

<script type="text/javascript">
    barSetLD("${result.percentage}");
</script>

Answer 1

将代码放在页面底部，其中已加载所有DOM。或者至少在调用<div id="levenshtein-distance"/>之前确保document.getElementById("levenshtein-distance");存在且已满载。如果您有多个levenshtein-distance ID ...

，请仔细检查

通过跨页面的javascript函数将字符串分配给div值

1 个答案: