javascript - 如何在单击时更改对象值？

Question

我正在使用名为 #changetotypes 的 div 在 menu 中填充/插入 jsonObjects[i].type .我从菜单中的 jsonObjects[i].type 获取值 r、c 和 e，知道我想要能够单击值 r、c 和 e 并将值更改为单击的值。知道我可以点击一个对象，它显示值 r、c 或 e。因此，如果我单击一个对象，它会获取/显示值 jsonObjects[i].type r、c 或 e 在对象具有的菜单中。知道如何将我点击的对象值示例从 r 更改为 c 吗？

<li>
    <a href="#">Typs</a>
        <ul>
            <li>
                <a href="#"><span id="currenttype" title=""></span></a>
                <ul id="changetotypes"></ul>
            </li>
        </ul>
</li>

function populateTypes() {

    for(i = 0; i < jsonObjects.length; i++) {

        if(availableTypes.indexOf(jsonObjects[i].type) < 0) {

            availableTypes.push(jsonObjects[i].type);
            $("#changetotypes").append('<li><a href="#">' + jsonObjects[i].type + '</a></li>');
        }
    }
}

Answer 1

您可以尝试类似以下的操作 (jsFiddle) .假设 jsonObjects 来自其他地方。

function populateTypes() {
    var availableTypes = [];
    for(var i = 0; i < jsonObjects.length; i++) {
        if(availableTypes.indexOf(jsonObjects[i].type) < 0) {
            availableTypes.push(jsonObjects[i].type);
            $('<li><a href="#">' + jsonObjects[i].type + '</a></li>')
            .data('type', jsonObjects[i].type)
            .on('click', function(){ $('#currenttype').text($(this).data('type')); })
            .appendTo('#changetotypes');
        }
    }
}

在这里，当我们为特定类型创建

元素时，我们同时添加了一个点击处理程序来更改 currenttype 元素的文本。

我们将要将 currenttype 更改为的类型存储在

元素的数据中，因此我们不必担心 closures in the loop ，但也有其他方法可以解决该问题，例如创建一个返回函数的函数(参见链接)或使用 元素的内容(如 $('a', $(this)) .text()).