td的class属性中有多个条件

时间:2017-12-18 00:02:00

标签: javascript html multiple-conditions

我有一个具有String属性的对象,该属性可能有四个可能的值,对于每个我希望将不同的css类放入单元格的值。 我想知道是否有办法在这里写复合条件:

self.todosViewModel.todos.value = self.todosViewModel.todos.value

我尝试编写一个javascript函数,但我不确定它是否正确,我认为函数调用是错误的:

<ui:repeat value="#{row.info}" var="wui" >
            <td class="#{wui.status eq 'In execution'? 'inexec' : '' }"> 
            <!--<td id="wuitd" onLoad="classfunction()" >--> 
                <h:outputText value="#{wui.status}" />
                <h:outputText value="#{wui.remainingEffort} effort units" />
           </td>
</ui:repeat>

2 个答案:

答案 0 :(得分:1)

您可以找到关于问题的JS部分需要了解的大部分或全部内容here ...我不知道“wui”部分的内容。

进一步参考(您可以更好地使用Google并添加一些额外的关键字来匹配您的环境):

我在这种情况下的第一个想法几乎是使用“嘿,我知道,我可以使用jQuery!” ......我知道,“现在我有两个问题”,但确实有效:o)

我假设你在这里加载了某种JS框架,无论如何。如果是这样,并且它不是jQuery,请找出它的“页面加载”机制是什么。除非您完全确定将在您的应用程序中使用哪些浏览器,否则您不希望“手动”解决这些问题。

答案 1 :(得分:0)

看起来您正在使用JSP / JSF(或者至少使用EL表达式的东西)。在将来的问题中,最好准确指定您正在使用的内容(通常通过标签)。根据EL的文档,您可以使用哈希查找。因此,如果您可以在某个地方定义以下内容,然后可以在模板中访问:

statusToClass = {
  "In execution": "inexec",
  ... // define your other value -> class translations
}

你应该能够:

<td class="#{statusToClass[wui.status]}"> 
  <h:outputText value="#{wui.status}" />
</td>

我承认我不懂EL,所以在哪里或如何定义statusToClass并不清楚。但是,此方法可以很好地避免支持对象/哈希的其他语言的多个条件。只要您可以依赖wui.status始终具有可预测的值。这是因为您在查找时没有编程控制,也没有机会回退到默认值。在JavaScript中,您可以轻松添加回退,但不能确定EL会支持这种回退。

statusToClass[wui.status]||'default'

看起来你可以定义EL3可以访问的方法(作为Bean的一部分) - https://docs.oracle.com/javaee/7/tutorial/jsf-el003.htm - 所以这可能是你可以查看的另一条路径(而不是JavaScript方法) ,看起来它可能容易出现一些问题,即onLoad.value - 除非您正在使用的Java上下文通过扩展支持这些。通过它的声音,您与EL期望的工作方式集成得越多,就越容易 - 特别是在使用ui:repeat等其他惯例时。