javascript - 将多个值附加到单个div

我正在使用以下mapbox.js example从geojson文件中过滤要素。该示例是不言自明的-第一步是查找所有选中的复选框并构建其值列表。

目前，复选框的值都是单个字符串。我的问题很简单，复选框中的value可以是整数数组（或字符串数​​组吗？），如果是，如何将整数数组附加到value中的div input，以便您可以一次过滤多个值？

for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);

<div id='filters' class='ui-select'>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='fast-food' value='fast-food'/><label for='fast-food'>fast-food</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bicycle' value='bicycle'/><label for='bicycle'>bicycle</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bar' value='bar'/><label for='bar'>bar</label></div>
</div>
<div id='map'></div>

<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaXNrYW5kYXJibHVlIiwiYSI6ImNpazE3MTJldjAzYzZ1Nm0wdXZnMGU2MGMifQ.i3E1_b9QXJS8xXuPy3OTcg';
var map = L.mapbox.map('map', 'mapbox.dc-markers');
var filters = document.getElementById('filters');
var checkboxes = document.getElementsByClassName('filter');

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) on.push(checkboxes[i].value);
    }
    // The filter function takes a GeoJSON feature object
    // and returns true to show it or false to hide it.
    map.featureLayer.setFilter(function (f) {
        // check each marker's symbol to see if its value is in the list
        // of symbols that should be on, stored in the 'on' array
        return on.indexOf(f.properties['marker-symbol']) !== -1;
    });
    return false;
}

// When the form is touched, re-filter markers
filters.onchange = change;
// Initially filter the markers
change();
</script>

最佳答案

您可以利用jQuery的.data() method，它允许您为DOM上的元素分配属性名称和值。您可以将数据元素的值设置为逗号分隔的整数列表，这些列表可以解析为自己的数组。

一些（未经测试的）伪代码作为示例：

<div id='filters' class='ui-select'>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='fast-food' value='fast-food' data-filter='fast-food,restaurants'/><label for='fast-food'>fast-food</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bicycle' value='bicycle'/><label for='bicycle' data-filter='bicycle, transportation'>bicycle</label></div>
  <div><input type='checkbox' checked=checked class='filter'
             name='filter' id='bar' value='bar' data-filter='bar, restaurants'/><label for='bar'>bar</label></div>
</div>

...

function change() {
    // Find all checkboxes that are checked and build a list of their values
    var on = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
          var array = $(checkboxes[i]).data("filter").split(',');
          Array.prototype.push.apply(on,array);
        }
    }

    ...
}