Question

我将 todo 对象的数组 todolist 传递给我的.ejs文件。这种对象的关键是：动作/日期/优先级

我打印出那些键值，如果优先级> 3，我希望优先级文本打印为红色;如果优先级= = 3则打印为橙色，如果优先级为＆lt; = 2，则打印为绿色。如果不清楚，它会更清楚地看到代码。

以下是我的代码：

    <ul id= "list1">
    <% todolist.forEach(function(todo, index) { %>
        <li><a href="/todo/supprimer/<%= index %>">✘</a> 
            <%= todo.action %> <%=todo.date%> (priorité: <div id="prio<%index%>"><%=todo.priority%>/5)</div>
        </li>
    <% }); %>
    </ul>

    <script>
        $('#list1 div').each(function() {
            if ($(this).text() <= 2) $(this).css('color', 'green');
            if ($(this).text() == 3 ) $(this).css('color', 'orange');
            else (this).css('color', 'green');
            console.log("i'm in");
            });
    </script>

我的函数是否可能与extern css样式表冲突？此外，我无法获得＆＃34;我在＆＃34;在我的控制台中，我不明白为什么...... 如果有人可以帮助我，谢谢

Answer 1

使用css类而不是Javascript

.red {
    color: red;
 }

 .green {
    color: green;
 }

 .orange {
    color: orange;
 }

然后在循环中，检查优先级值

<ul id= "list1">
<% todolist.forEach(function(todo, index) { %>
    <li><a href="/todo/supprimer/<%= index %>">✘</a> 
        <%= todo.action %> <%=todo.date%> (priorité: 
        <% if (todo.priority <= 2) { %>
            <div id="prio<%index%>" class="green"><%=todo.priority%>/5)</div>
        <% } else if (todo.priority == 3) { %>
            <div id="prio<%index%>" class="orange"><%=todo.priority%>/5)</div>
        <% } else if (todo.priority > 3) { %>
            <div id="prio<%index%>" class="red"><%=todo.priority%>/5)</div>
        <% } %>
    </li>
<% }); %>
</ul>

Answer 2

您的代码中存在语法错误：else (this).css应为else $(this).css。你的if / else条件也是不稳定的。你有if / if / else，但我想你可能想要if / elseif / else。我纠正了这些事情：

$('#list1 div').each(function() {
  var priority = $(this).text().substr(0,1);
  if (priority <= 2) $(this).css('color', 'green');
  else if (priority == 3 ) $(this).css('color', 'orange');
  else $(this).css('color', 'red');
});

编辑：我已更新我的答案，以满足对每个<div>内容的第一个字符而不是整个字符串进行比较的要求。

如果值，则修改颜色文本

2 个答案: