更新

Question

我正在尝试根据它的当前值自定义<input>元素的颜色。

到目前为止，我已尝试过基于此question或此post的解决方案，但即使对于简单条件（例如“1＆lt; 2”）也无法使其工作，等等甚至更少基于输入的值（例如“值<2”）。

以下是jsFiddle说明问题，以及我的尝试如下：

    <p>
Simple coloring
      <input autocomplete="off" id="spinner-twenty"  style="background-color:red" class="spinner-twenty" name="spinner" value="0.1">
    </p>

    <p>
Conditional coloring based on style condition
      <input autocomplete="off" id="spinner-twenty"  style="${1} < 2 ? 'background-color:red' : 'background-color:white'" class="spinner-twenty" name="spinner" value="0.1">
    </p>

    <p>
   Conditional coloring based on background-color condition

      <input autocomplete="off" id="spinner-twenty"  style="background-color:{!IF(1 < 4,'#7CFC00', '#FFA07A')}" class="spinner-twenty" name="spinner" value="0.1">
    </p>    

  Conditional coloring based on background-color condition (based on inputs "value")

      <input autocomplete="off" id="spinner-twenty"  style="background-color:{!IF(value < 4,'#7CFC00', '#FFA07A')}" class="spinner-twenty" name="spinner" value="0.1">
    </p>

Answer 1

您链接的资源正在描述服务器端逻辑（两种不同的类型，您似乎都没有使用它们）。它们确定在离开服务器之前应该输出什么HTML。

浏览器不支持样式属性中的逻辑。

要实现这一目标，您需要编写一些JavaScript。您可以将事件侦听器绑定到存在输入事件时触发的元素，读取元素的value属性，然后设置{{1属性。

Answer 2

您可以使用 jQuery .change函数，该函数将在input值更改时触发，

但在您使用微调器的情况下，当值更改时，它会向名为aria-valuenow=""的输入添加一个新属性，以便您可以＆＃39; t触发值更改，因为.value()但没有.aria-valuenow()，

到目前为止，我为测试创建了新的默认输入，并且它有效，请参阅更新后的JSfiddle。

更新

您可以使用.on("spinstop",...)，查看更新后的JSfiddle。

基于当前值

2 个答案:

更新