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

Question

我正在使用以下 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>

Answer 1

您可以利用 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);
        }
    }

    ...
}