0

我正在做类似的事情： 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 的版本。

4

2 回答 2

0

Akash Sarawagi did gratefuly the first part and the rest of the code has been changed a little bit.

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);
        });
};

Thanks to all for your help.

于 2013-09-24T10:28:15.960 回答
0

这是必需的

<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);
}
于 2013-09-18T18:22:42.600 回答