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 は最初の部分に感謝し、残りのコードは少し変更されました。

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

ご協力いただきありがとうございます。

于 2013-09-24T10:28:15.960 に答える
0

here is the required 

<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>

and use this in js file

function abc(me)
{
    alert(me.name);
}
于 2013-09-18T18:22:42.600 に答える