Question

我正在做类似的事情：http://www.mapbox.com/mapbox.js/example/v1.0.0/filtering-markers/

但是有这样的多个“复选框”

<ul>
    <li><a href='#' class='filter' id='douze' value='2008'>2008</a></li>
    <li><a href='#' class='filter' id='douze' value='2009'>2009</a></li>
    <li><a href='#' class='filter' id='douze' value='2010'>2010</a></li>
    <li><a href='#' class='filter' id='douze' value='2011'>2011</a></li>
    <li><a href='#' class='filter' id='douze' value='2012'>2012</a></li>
    <li><a href='#' class='active' id='filter-all'>Toutes les années</a></li>
</ul>

我想把价值链接到“复选框”，但它不起作用。

var douze = ""; 
var inputElements = document.getElementsByClassName('filter');
for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].className==="filter" && inputElements[i].checked){
          douze = inputElements[i].value;
          //console.warn(douze)
          break;
      }
}

它正试图在这里运行：http://temp.sharesand.info/prison/index5.html#

我正在尝试在普通的JS上做这件事，但我看到了很多版本的jquery。

Answer 1

我对Mapbox知之甚少，但有一点我可以确定<a>标签不支持属性checked。

点击<a>时尝试切换CSS类，或尝试使用<input type="checkbox" />代替<a>。

Answer 2

这是必需的

<ul>
    <li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2008'>2008</a></li>
    <li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2009'>2009</a></li>
    <li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2010'>2010</a></li>
    <li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2011'>2011</a></li>
    <li><a href='#' class='filter' id='douze' onclick="abc(this);" name='2012'>2012</a></li>
    <li><a href='#' class='active' id='filter-all'>Toutes les années</a></li>
</ul>

并在js文件中使用它

function abc(me)
{
    alert(me.name);
}

Answer 3

Akash Sarawagi对第一部分做了很好的准备，其余的代码已经改变了一点。

div id='map-ui'>
    <ul>
        <li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2008'>2008</a></li>
        <li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2009'>2009</a></li>
        <li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2010'>2010</a></li>
        <li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2011'>2011</a></li>
        <li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2012'>2012</a></li>
        <li><a href='#' class='filter' id='douze' onclick="selectyear(this);" name='2013'>2013</a></li>
        <li><a href='#' class='active' id='filter-all' onclick="selectyear(this);" name="all">Toutes les années</a></li>
    </ul>
</div>
<div id='map'></div>
<div id='info'></div>
<script type='text/javascript'>

//loading background
var map = L.mapbox.map('map', 'n3b.map-xb4fp4td', { zoomControl: false })
    .setView([47.145894, 2.581787], 6);

//loading markers
var markerLayer = L.mapbox.markerLayer()
    .loadURL('http://temp.sharesand.info/prison/mortsPrisons.geojson')
    .addTo(map);

//filter per year
var year = "all";
function selectyear(me)
{
    var year = me.name;

        document.querySelector('#map-ui a.active').classList.remove('active');
        me.classList.add('active');

        markerLayer.setFilter(function(f) {
            if (year == "all") return true;
            return (f.properties['DateTime'].indexOf(year) != -1);
        });
};

感谢大家的帮助。

使用getElementsByClassName获取Mapbox的复选框值

3 个答案: