javascript - 对象不打印/返回信息到 HTML(使用 jquery .hover())？

Question

我有下表，其中有两个 id，mPoint 和 bPoint。当我将鼠标悬停在 id 为 Hydrogen 或 helium 的元素上时，我想使用 html() 在此处插入数据。

<div class="info" id="hydrogen">
    <em>1</em>
    H    
    <p>Hydrogen</p>
</div>
<div class="info" id="helium">
    <em>2</em>
    Li
    <p>Helium</p>
</div>

<table class="propTable">
    <tr>
        <td>Melting Point</td>
        <td id="mPoint"></td>
    </tr>
    <tr>
        <td>Boiling Point</td>
        <td id="bPoint"></td>       
    </tr>
</table>

这是 JS 函数

function PropElements() {
    var propHydrogen = { 
        "m_point": "14.01", 
        "b_point": "20.28"
    };
    var propHelium = { 
        "m_point": "0", 
        "b_point": "4.22"
    };

    $('.info').hover(function() {
        var getId = this.id;
        var getPropName = "prop" + getId.charAt(0).toUpperCase() + getId.slice(1);
        console.log(getPropName);
        $("#mPoint").html(getPropName.m_point + " K");
        $("#bPoint").html(getPropName.b_point + " K");
    }, function() {
        $("#mPoint").html("unknown");
        $("#bPoint").html("unknown");
    });
}

这是氢和氦的两个对象。 getPropName 将更改悬停元素的名称，使其变为 prop[hoveredElementID]。现在，如果我将鼠标悬停在带有 #Hydrogen 的 div 上，getPropName 会将名称更改为 propHydrogen，这也是对象的名称。然后使用html()，它应该在指定ID的位置打印m_point和b_point的值。

但它显示 getPropName.m_point 和 getPropName.b_point 的值未知。我尝试将对象放入函数中，但即使控制台返回应该起作用的确切 propName，它仍然返回未知。我尝试使用 innerHTML，但返回的是 undefined。

但是，如果我直接使用名称(propHydrogen.m_point)，它会正确打印该值。这里可能出现什么问题？

Answer 1

问题是因为您无法以您尝试的方式动态使用变量的值来指向另一个已定义的变量。更好的方法是使用单个对象来存储所需的所有信息，然后动态访问该对象的属性。试试这个:

function propElements() {
    var elements = {
        hydrogen: { 
            "m_point": "14.01", 
            "b_point": "20.28"
        },
        helium: { 
            "m_point": "0", 
            "b_point": "4.22"
        }
    };

    $('.info').hover(function() {
        $("#mPoint").html(elements[this.id].m_point + " K");
        $("#bPoint").html(elements[this.id].b_point + " K");
    }, function() {
        $("#mPoint").html("unknown");
        $("#bPoint").html("unknown");
    });
}

Working example

请注意，通过使对象中的属性名称与 .info 元素的 id 相匹配，可以节省大量不必要的字符串操作。