Question

我想创建一个温度滑块，它会根据熔点和沸点改变div的颜色。这些值存储在以下数组

中

var elements = {
    hydrogen: {"m_point": "14.01", "b_point": "20.28"},
    helium: {"m_point": "0", "b_point": "4.22"}, 
    //----------so on----------------------------
};

这些是必须改变颜色的div

<div id="hydrogen"><em>1</em>H<p>Hydrogen</p></div>
<div id="helium"><em>2</em>He<p>Helium</p></div>
<!---------so on----------------------------------->

我无法弄清楚如何使用滑块返回的值，将该值与给定的熔点/沸点进行比较，并根据该值更改div的颜色（例如blue if value>=m_point, red if value>=b_point等。）。当元素的状态将从固体 - 液体，液体 - >气体改变时基本上改变颜色，反之亦然。我不能使用if else语句，因为我必须每次为每个元素指定颜色。

Answer 1

由于您没有提供有关滑块的信息，我猜它可以正常工作，您可以成功检索温度。

如果相关元素（应根据温度改变颜色的元素）具有常见 class（这里我们将使用），这将是最简单的class="element"）。

var $element = $('.element');

我们假设var temperature是滑块设置的温度。

我还会将对象中的温度从字符串更改为数字。（"m_point":14.01,"b_point":20.28）

现在我们要做的就是迭代通过这些相关的元素，如下所示：

$.each($element, function ( key, value ) {
    var id = value.id;
    if (temperature >= elements[id].b_point) {
        // apply the background-color for gas state
        value.style.backgroundColor = "red";
    } else if (temperature >= elements[id].m_point) {
        // apply the background-color for liquid state
        value.style.backgroundColor = "green";
    } else {
        // apply the background-color for solid state
        value.style.backgroundColor = "blue";
    }
});

我们所做的是使用square bracket notation“导航”对象elements，允许我们使用变量id。这也意味着只有id的{{1}} - 属性与div的{{1}}之一匹配时，它才有效。

<强> PS：

您当然需要绑定脚本到某种事件才能执行。我为你创建了一个codePen，它绑定到输入元素的properties事件。

使用输入滑块控制多个div的颜色？

1 个答案: