Day18-选取器应用_串接json档

今天把昨天写的选取器跟显示东西做串接
首先先写一个json，若会用firebase或App Script，也可以串接线上的
这边做一个比较简单的，是地区县市分类

然後我们在昨天的选取器外面加一个div并设上id

<div id="show"></div>
<form>…</form>

然後进去JS，新增一个函式渲染新增json内容到画面上
因为这边只放文字上去，就不特别写一个component了

function area() {
    $.get('area.json', function (response) {
        $.each(response, function (index, element) {
            for (i = 0; i < element.length; i++) {
                var area = element[i];
                $("#show").append(area + " ")
            }
        });
    }, 'json')
}

记得要在ready中使用他，然後就会显示了

然後我们需要让点击input时会显示有关的内容，需要在写一个function让点击input时被呼叫
这边的想法是，有一个阵列存取我们多选选到的内容，然後传给刚刚写的函式做选择渲染
所以我们先在最外面(非任何函式内)新增一个阵列变数

var choosearea = new Array();

然後再写一个函式

function choose(mychoose) {
    if (mychoose.checked) {
        choosearea.push(mychoose.id);
        if (mychoose.id == "CheckAll") {
            choosearea = []
        }
    }
    else {
        choosearea.splice(choosearea.indexOf(mychoose.id), 1)
    }
    area(choosearea)
}

如果选择是"没有任何多选(等於"全部"被选择)"的话阵列会是空的，为了让点击"全部"时的阵列内容是一样的，所以在"全部"被选择时，直接让阵列为空
这个函式作用是，若点击的input是多选的，就把该input的ID新增或删除至我们刚刚设好的阵列中，然後把它传给我们刚刚写好的area函式
这边这个函示写好後需要回到HTML分别加入各个input上，并要求点击时要回传input本身给函式，让函式可以去抓取被点击的是谁
这边只放一个其他以此类推

<input type="radio" id="CheckAll" onclick="choose(this)" checked />

因为我们有传参数给area函式，所以我们需要在area加上参数接收
然後运用index是否等於我们传的内容来过滤新增的东西

function area(n) {
    $.get('area.json', function (response) {
        $.each(response, function (index, element) { 
            for (a = 0; a < n.length; a++) {
                if (index == n[a]) {
                    for (i = 0; i < element.length; i++) {
                        var area = element[i];
                        $("#show").append(area + " ")
                    }
                }
            } 
        });
    }, 'json')
}

然後我们这边就能根据点击的选项新增东西了

恩因为内容是不断新增，看不是很明显，所以我们在area函式的第一行新增一个$("#show").empty()，让函式开始渲染前先把show清空再新增

但这边我们发现如果没有任何多选(选择是全部的话)，没有东西被显示
因为此时阵列是空的，没有东西可以显示
所以我们要多设一个判别式，如果阵列为空，我们就显示所有东西
写法是去判别阵列长度，若长度为0则显示全部，若不为0就根据阵列内容去显示

function area(n) {
    $("#show").empty()
    $.get('area.json', function (response) {
        $.each(response, function (index, element) {
            if (n.length == 0) {
                for (i = 0; i < element.length; i++) {
                    var area = element[i];
                    $("#show").append(area + " ")
                }
            } else {
                for (a = 0; a < n.length; a++) {
                    if (index == n[a]) {
                        for (i = 0; i < element.length; i++) {
                            var area = element[i];
                            $("#show").append(area + " ")
                        }
                    }
                }
            }
        });
    }, 'json')
}

然後就完成选择显示啦!!

然後多分享一个别人写好的阵列remove()方法
我的写法是先抓取到我们需要的东西在阵列的哪个位置
choosearea.indexOf(mychoose.id)

indexOf可以抓取使用的阵列中，指定内容在该阵列的位置(第几项)

然後删除指定阵列
choosearea.splice(choosearea.indexOf(mychoose.id), 1)

splice可以删除使用的阵列中，指定位置(该项)的内容

若整个jquery会不断用到删除阵列内容的算式的话，可以考虑直接引入别人写好的方法

Array.prototype.remove = function () {
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
}

然後choosearea.splice(choosearea.indexOf(mychoose.id), 1)就能直接用choosearea.remove(mychoose.id)替换掉了