使用另一个数组中的特定值过滤多个数组

debugcn 发表于 Dev

莫哈末·玛哈法迪

我正在使用来自Google工作表的JSON提要，但JSON的组织方式并没有真正组织，因此使用循环函数将其提取到不同的数组中

使用$ .each循环函数将这些数组提取到html卡上

代码在此js小提琴中https://jsfiddle.net/mohalmah/wtydLo3b/9/

我想创建一个函数，根据周数组过滤那些数组

场景：

用户单击“ 11月”按钮，该函数将过滤其中所有具有“ Nov”值的数组值，然后过滤具有“ Nov”值的相同位置的其他数组（内容等）

然后将相应的卡片提取到html

JS：

 var week = ['Nov 1', 'Nov 2', 'Dec 1', 'Dec 2', 'Jan 1', 'Jan 2'];
 var content = [1, 2, 3, 4, 5, 6]

 $.each(week.slice(), function(i, data) {
 var ul_data = [

 '<div class="container">' +
 '<div class="flex-container">' +

 '<div class="card">' +
 '<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>' +
 '<div class="card-content">' +
 '<p>Week ' + week[i] + '</p>' +
 '<h1>Cultural Topic</h1>' +
 '<p> Content' + content[i] + '</p>' +
 '</div>' +
 '</div>' +
 '</div>' +
 '</div>'
 ];

 $("#recentActivities").append(ul_data);

 });

尤金·桑尼奇

像这样，根据单词模式，您将同时拥有数组内容和星期过滤

这是一个小提琴示例：https : //jsfiddle.net/2bpthxLm/

var week = ['Nov 1', 'Nov 2', 'Dec 1', 'Dec 2', 'Jan 1', 'Jan 2'];
var content = [1, 2, 3, 4, 5, 6]

const word = 'Dec'
const indexArr = [];

week = week.filter((x, i) => {
  const hasWord = x.indexOf(word) > -1
  if (hasWord) {
    indexArr.push(i);
  }
  return hasWord;
});
content = content.filter((x, i) => indexArr.includes(i))

console.log(content, week);

这是完整的js / jquery工作代码

 var week = ['Nov 1', 'Nov 2', 'Dec 1', 'Dec 2', 'Jan 1', 'Jan 2'];
 var content = [1, 2, 3, 4, 5, 6]


 let word = 'Dec'
 let copyWeek = [];
 let copyContent = [];
 const indexArr = [];

 document.getElementById("button-filter").addEventListener('click', () => {
   word = document.getElementById('search-word').value.trim();
   copyWeek = week.filter((x, i) => {
     const hasWord = x.indexOf(word) > -1
     if (hasWord) {
       indexArr.push(i);
     }
     return hasWord;
   });
   copyContent = content.filter((x, i) => indexArr.includes(i))
   if (!week.length) {
     populateList(week, content);
   } else {
     populateList(copyWeek, copyContent);
   }

 })

 populateList(week,content)

 function populateList(week, content) {
   $('#recentActivities').empty();
   $.each(week, function(i, data) {
     var ul_data = [

       '<div class="container">' +
       '<div class="flex-container">' +

       '<div class="card">' +
       '<div class="card-image" style="background-image: url(https://picsum.photos/600/100)"></div>' +
       '<div class="card-content">' +
       '<p>Week ' + week[i] + '</p>' +
       '<h1>Cultural Topic</h1>' +


       '<p> Content' + content[i] + '</p>' +

       '</div>' +
       '</div>' +


       '</div>' +
       '</div>'
     ];

     $("#recentActivities").append(ul_data);

   });
 }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。