首頁猿問我可以對已過濾的項目應用過濾器嗎...

我可以對已過濾的項目應用過濾器嗎 (JavaScript)

JavaScript

浮云間 2022-01-13 16:11:40

我想從已經過濾的嵌套數組中過濾項目，但我不希望刪除以前的過濾器。我最初像這樣定義數組：markers1 = [ ['0', '15 Smith Ct', 50.472711, -3.540386, 'Dartington', 'House', 'http://google.com/', 'https://www.msvhousing.co.uk/images/properties/for-rent/609/khubsuret%20compressed.jpg'], ['1', '27 Clobells', 50.424091, -3.832449, 'Dartington', 'Bungalow', 'http://google.com', 'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'], ['2', '155 Churchill Rd', 51.011143, -4.195814, 'Bideford', 'Flat', 'http://google.com', 'https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'], ['3', 'Dennis Camp Rd', 50.431930, -4.121285, 'Plymouth', 'Bungalow', 'http://google.com', 'https://images.unsplash.com/photo-1552903023-dc7b4c9fa5bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']];然后內容是這樣分配的：function addMarker(marker) { var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var location = marker[4]; var property = marker[5]; var link = marker[6]; var image = marker[7] marker1 = new google.maps.Marker({ title: title, position: pos, location: location, map: map, property: property, link: link, image: image });然后還有另一個工作原理完全相同，但在陣列的不同部分。所以這過濾了位置（達丁頓、比德福德和普利茅斯），這很好。但是一旦完成，我現在想過濾掉 Dartington 中的房屋類型，以便僅輸出 Dartington 中的房屋。希望這是有道理的，如果沒有請告訴我，如果這已經在其他地方得到回答，我找不到它，所以如果你能指出我正確的方向，我將不勝感激。

查看完整描述

2 回答

犯罪嫌疑人X

TA貢獻2080條經驗獲得超4個贊

The filter() method creates a new array with all elements that pass the test implemented by the provided function.更多信息在這里：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

因此，您可以根據需要應用任意數量的過濾器。

你也可以像這樣鏈接它們：

const resultArray = array.filter(filterFunction1).filter(filterFunction2)

這將按照您定義的順序應用過濾器。

反對回復 2022-01-13

翻閱古今

TA貢獻1780條經驗獲得超5個贊

只是展示原理。不必費心將其連接到實際的谷歌地圖，但這可以保持不變。

// collection of markers

var marker_collection = [

[ '0','15 Smith Ct', 50.472711, -3.540386, 'Dartington', 'House', 'http://google.com', 'https://www.msvhousing.co.uk/images/properties/for-rent/609/khubsuret%20compressed.jpg' ],

['1', '27 Clobells', 50.424091, -3.832449, 'Dartington', 'Bungalow', 'http://google.com',

'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80'],

['2', '155 Churchill Rd', 51.011143, -4.195814, 'Bideford', 'Flat', 'http://google.com',

'https://images.unsplash.com/photo-1449844908441-8829872d2607?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'],

['3', 'Dennis Camp Rd', 50.431930, -4.121285, 'Plymouth', 'Bungalow', 'http://google.com',

'https://images.unsplash.com/photo-1552903023-dc7b4c9fa5bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60']

];

// Inititally we start with all the markers, so we clone the full collection.

// Just use an empty array if you want to start with nothing.

// Since the inner arrays only contain strings and numbers, we can just slice those.

var clone_array = function( array ) {

return array.map(function( marker ) {

return marker.slice();

});

};

var selected_markers = clone_array( marker_collection );

// Separate reusable function to render all makers.

// We will only use the selected_markers from now on for rendering

// And the marker_collection to reset back to everything.

var render = function( markers ) {

var html = markers.map(function( marker ) {

// Usign the array since we didn't create google maps objects.

var image = marker[7];

var title = marker[1];

var link = marker[6];

// var { image, title, link } = marker;

return `<div class='col-sm col-md-4 mt-5 mt-lg-0'><img class='w-100 mt-5' src="${ image }" style='max-height:200px' ><br><div class='display-6 my-3 ml-3'>"${ title }"</div><a class='lead ml-3' href='"${ link }"'>View more about this property</a></div><button`;

});

document.querySelector( 'main' ).innerHTML = html.join( '' );

};

// Add a filter function some way.

// Just using a button and a fixed location as an example.

// You'd get the location from whatever the user selected.

var filter = function( event ) {

var location = 'Dartington';

// filter the markers

// When the markers are gogole objects instead of arrays, you'll use marker.location again instead of marker[4]

var remaining_markers = selected_markers.filter(function( marker ) {

return marker[4] === location;

});

// save the remaining markers so we can filter those again if needed.

selected_markers = remaining_markers;

// after filtering, rerender the remaining markers.

render( selected_markers );

};

// add the filter event to the button

document.querySelector( '#filter' ).addEventListener( 'click', filter );

// reset the markers back to the original

// So we just do the same as before, clone the original array and then rerender.

var reset = function( event ) {

selected_markers = clone_array( marker_collection );

render( selected_markers );

};

// add the reset event to the button

document.querySelector( '#reset' ).addEventListener( 'click', reset );

// initial render upon startup

render( selected_markers );

<button id="filter">Filter</button>

<button id="reset">Reset</button>

反對回復 2022-01-13

2 回答
0 關注
158 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網站添加到書簽

微信客服

購課補貼
聯系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

我可以對已過濾的項目應用過濾器嗎 (JavaScript)

我可以對已過濾的項目應用過濾器嗎 (JavaScript)

2 回答

添加回答