請(qǐng)教如何利用JS完成簡(jiǎn)單的商品篩選問題

1.設(shè)定一個(gè)數(shù)組，其中存放有全部商品的名稱，并在界面左側(cè)的邊框中顯示出來
2.當(dāng)用戶點(diǎn)擊左側(cè)邊框中的商品，表示選中該商品，則將該商品從左側(cè)的列表中刪除，并添加到右側(cè)的選中列表中；
3.注意，在右側(cè)的選中列表中商品名稱要按順序排序，添加新選中的商品名，也要插入到對(duì)應(yīng)的順序位置

圖片描述

回答

編輯回答

淺淺

先說一個(gè)最原始的方法實(shí)現(xiàn)

class Dispatcher {
    constructor() {
        this._event = [];
    }
    on(eventName, fn) {
        var subscription = {
            eventName,
            callback: fn
        };
        this._event.push(subscription);
        return this;
    }
    off(eventName, fn) {
        this._event = this._event.filter(
            subscription => !(subscription.eventName === eventName && (fn ? subscription.callback === fn : true))
        );
        return this;
    }
    emit(eventName, ...data) {
        this._event.forEach(subscription => {
            if (subscription.eventName === eventName) {
                subscription.callback(...data);
            }
        });
        return this;
    }
}

var leftList = [
    {productId: 10006},
    {productId: 10031},
    {productId: 10016},
    {productId: 10017},
];


var leftList = leftList.map((item, index) => ({...item, order: index,}));

var rightList = [];

var dispatch = new Dispatcher();

dispatch.on('select', function(product) {
    leftList = leftList.filter(_product => product !== _product);
    rightList.push(product);
});

dispatch.on('unselect', function(product) {
    rightList = rightList.filter(_product => product !== _product);
    leftList.push(product);
});

dispatch.emit('select', leftList[0]);
console.log('leftList: ', [...leftList],'\n', 'rightList', [...rightList]);

dispatch.emit('unselect', rightList[0]);
console.log('leftList: ', [...leftList],'\n', 'rightList', [...rightList]);

然后再說一個(gè)比較Vue的，左右兩列應(yīng)該算兄弟組件之間的通信，組件的代碼和視圖的代碼應(yīng)該在兩個(gè)js文件。組件的通信可以通過子組建1 -> 父組件 -> 子組建2，但是比較麻煩。

我感覺可以用Vuex了。

2017年4月2日 07:01

編輯回答

陪她鬧

簡(jiǎn)單說下，把選中的商品和未選中的商品做一個(gè)標(biāo)記，當(dāng)商品選中狀態(tài)改變時(shí)，改變狀態(tài)。讓選中的展示在左邊，未選中的展示在右邊。如果左邊和右邊的排序一致的話，控制顯示隱藏就行了。如果不一致的話，展示的時(shí)候重排序或者第一次展示重排序，后期選擇插入就行了。

2017年5月15日 07:12

編輯回答