javascript - 返回语句未在数组中提供正确数量的过滤类(class)

Question

问题

我正在制作一张 map ，其中显示的图钉根据在一组下拉菜单中选择的选项而变化。

我现在可以单击密苏里州、伊利诺伊州和 18 洞球场的选项， map 将使用新的图钉重新创建。但是，当我选择9 洞球场 选项时，当该类别中有大约 25 个球场时，过滤后的数组会显示一个值。

更新#1

更改了index.html以反射(reflect)正确的选择选项

目标

• 点击下拉菜单之一中的选项，然后仅显示图钉与 map 上的这些值相关
• 让用户能够从州下拉列表中进行选择，其中包含选项密苏里州和伊利诺伊州AND holes，其中包含 9 - 孔和 18 孔并显示即。 密苏里州的 9 洞球场

脚本.js

<script>


    // This provides an array of all the courses
    var locations = [
        {% for content in COPY.courses %}
        {
            "name": "{{ content.name }}",
            "lat": "{{ content.lat }}",
            "lng": "{{ content.lng }}",
            "state": "{{ content.state }}",
            "holes": "{{ content.holes }}"
        },
        {% endfor %}
    ];

    $( document ).ready(function() {

        $("select").change(function(){

            var courseValue = $(this).find(":selected").val();
            console.log(courseValue);

            locations_filtered = locations.filter(function(el) {
                if (courseValue === "MO" || courseValue === "IL") {
                    return el.state == courseValue;
                } else if (courseValue === "9" || courseValue === "18") {
                    return el.holes == courseValue;
                }
            })

            $("#map").empty();
            makeMap(locations_filtered);
        });
    });

    function initMap() {
        makeMap(locations);
    }

    function makeMap(locations) {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(38.6270, -90.1994),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i].name);
                    infowindow.open(map, marker);
                }
            })(marker, i));

        }
    }
</script>

大约 100 门类(class)的数据结构如下所示

{
    "name": "Buffalo Ridge",
    "lat": "36.575508",
    "lng": "-93.190777",
    "state": "MO",
    "holes": "18"
},

index.html

<div class="header__filter filter--home">
            <label>Filter By State</label>

            <select>
                <option value="default" disabled="disabled">Pick an option</option>
                <option value="All">All states</option>
                <option value="MO">Missouri</option>
                <option value="IL">Illinois</option>
            </select>
        </div>

        <div class="header__filter filter--home">
            <label>Filter By Holes</label>

            <select>
                <option value="default" disabled="disabled">Pick an option</option>
                <option value="All">All holes</option>
                <option value="9">9-hole course</option>
                <option value="18">18-hole course</option>
            </select>
        </div>

Answer 1

解决方案

• 创建两个变量，一个用于 stateValue，另一个用于 holeValue
• 将类添加到您的选择中，在本例中为 select_state 和 select_hole
• 您想要从所有数组中创建一个过滤数组地点。我们将称之为firstfilter。
• 然后您想再次过滤该数组，我们将其称为第二个过滤器
• 您需要将 courseValue 变量更改为 stateValue在 secondFilter 的 firstFilter 和 holeValue 中
• === "9" 不起作用的原因是，当您将字符串与数字进行比较时，它的值和类型不匹配。在本例中使用 parseInt。
• 将您的 secondFilter 传递给 makeMap

脚本.js

<script>


    // This provides an array of all the courses
    var locations = [
        {% for content in COPY.courses %}
        {
            "name": "{{ content.name }}",
            "lat": "{{ content.lat }}",
            "lng": "{{ content.lng }}",
            "state": "{{ content.state }}",
            "holes": "{{ content.holes }}"
        },
        {% endfor %}
    ];

    $( document ).ready(function() {

        $("select").change(function(){

            var stateValue = $(".select_state:visible").find(":selected").val();
            var holeValue = $(".select_hole:visible").find(":selected").val();

            var firstFilter = locations.filter(function(el) {
                if (stateValue === "MO" || stateValue == "IL") {
                    return el.state === stateValue;
                } else {
                    return true;
                }
            });

            var secondFilter = firstFilter.filter(function(el) {
                if (holeValue === "9" || holeValue == "18") {
                    return parseInt(el.holes) === parseInt(holeValue);
                } else {
                    return true;
                }
            })

            console.log(firstFilter);
            console.log(secondFilter);

            $("#map").empty();
            makeMap(secondFilter);
        });
    });

    function initMap() {
        makeMap(locations);
    }

    function makeMap(locations) {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(38.6270, -90.1994),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i].name);
                    infowindow.open(map, marker);
                }
            })(marker, i));

        }
    }
</script>