javascript - 使用输入 slider 控制多个 div 的颜色？

Question

我想创建一个温度 slider ，它会根据 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----------------------------------->

我不知道如何使用 slider 返回的值，将该值与给定的熔点/沸点进行比较，并根据该值更改 div 的颜色(例如 blue if value>=m_point , 红色，如果 value>=b_point 等)。当元素的状态从固态->液态、液态->气态变化时，基本上会改变颜色，反之亦然。我不能使用 if else 语句，因为我每次都必须为每个元素指定颜色。

Answer 1

由于您没有提供有关 slider 的信息，我猜它可以工作并且您可以成功检索温度。

如果相关元素(那些应该根据温度改变颜色的元素)有一个common class(这里我们将使用 class="element")。

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

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

我还会将对象中的温度从字符串更改为数字。 ("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“导航”对象元素允许我们使用变量 id。这也意味着它仅在 div 的 id 属性与 elements 的 properties 之一匹配时才有效>.

附言:

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