Question

我的html页面中有一个复选框列表，如下所示：

<ul id="myList">
  <li class="checkboxItem">
    <input type="checkbox" name="item1" value="001" id="item-1"/> 
    <label for="item-1" class="checkboxLabel">Display 1</label>
  </li>
  <li class="checkboxItem">
    <input type="checkbox" name="item2" value="042" id="item-2"/>
    <label for="item-2" class="checkboxLabel">Display 42</label>
  </li> 
</ul>

现在我打电话来获取一些json数据，这样就回来了：

[{"name":"002","title":"Display 1"}]

我要做的是循环返回的json并更新复选框列表，以便禁用返回列表中的任何项目，以及标题与给定标签匹配的项目，输入值将更新。

所以在这个例子中，item2将被禁用，而item1的值将更新为002.

这是我到目前为止所做的，我不太确定从这里开始，也就是说，在循环内做什么。我确实可以控制json的返回方式，所以如果以另一种格式重新调整json是有意义的，我可以这样做。

编辑，更新了该功能，见下文。但是，一旦我进入每个函数内部的for循环，elem得到的值为“0”而不是js对象，例如： {“name”：“002”，“title”：“显示1”}。清楚数据，正在从功能的外部范围转移到每个功能的内部范围，但我该如何实现呢？

function(data) {
        $('#myList').children('li').each(function(i,e) {
            for(var elem in data) {
                var elemDescr = elem['title'];
                var elemName = elem['name'];
                if(elemDescr==$(this).find('.checkboxLabel').text()) {
                    $(this).find('input').attr('value',elemName);
                }
            }
        });

Answer 1

为每个复选框设置一个外部循环可能更容易，内部循环遍历每个json元素，根据元素/复选框是否匹配启用或禁用。

所以对你所拥有的内容进行反转：

function(data) {
    $('#myList').children('li').each(function() {
        // loop through your data elements here
    });
}

另一个选项（可能不太理想，因为它可能导致多个禁用/启用的转换）是禁用所有复选框，并在循环遍历每个元素时启用它们。

Answer 2

我发现了我的问题。而不是做：

for(var elem in data) {
            var elemDescr = elem['title'];
            var elemName = elem['name'];

        }

我需要这样做：

for(var index in data) {
            var elemDescr = data[index].title;
            var elemName = data[index].name;

        }

如何根据json数据列表更新html项列表

2 个答案: