Lucky'Dog 2022-08-20 15:25 采纳率: 75%
浏览 97
已结题

微信小程序多选筛选匹配问题

问题遇到的现象和发生背景

制作菜谱筛选小程序,现在希望将Articlelist中value值只要有一个或多个值与chooseValues相同保存下来,要是一个没有就删除

img

问题相关代码,请勿粘贴截图
const { articleList } = require("../../data/article-data.js");
Page({
  data:{
       //类型
  ArticleList:articleList,
  typeItems:['菜菜','肉肉','调料','蛋蛋','生存','忌口'],
  typeCurrentIndex:0,
   chooseItems:{
    0:[{
      name:'西兰花',
      value:'001',
      selected:false
    },{
      name:'胡萝卜',
      value:'002',
      selected:false
    },{
      name:'芋头',
      value:'003',
      selected:false
    },{
      name:'南瓜',
      value:'004',
      selected:false
    },{
      name:'白菜',
      value:'005',
      selected:false
    },{
      name:'菠菜',
      value:'006',
      selected:false
    },{
      name:'西红柿',
      value:'007',
      selected:false
    }],
    1:[{
      name:'猪肉',
      value:'101',
      selected:false
    },{
      name:'羊肉',
      value:'102',
      selected:false
    }],
    2:[{
      name:'盐',
      value:'201',
      selected:false
    },{
      name:'味素',
      value:'202',
      selected:false
    },
    {
      name:'水',
      value:'203',
      selected:false
    }],
    3:[{
      name:'鸡蛋',
      value:'301',
      selected:false
    },{
      name:'鹅蛋',
      value:'302',
      selected:false
    }],
    4:[{
      name:'NNB',
      value:'401',
      selected:false
    },{
      name:'NB',
      value:'402',
      selected:false
    }],
    5:[{
      name:'辣',
      value:'501',
      selected:false
    },{
      name:'酸',
      value:'502',
      selected:false
    }],
  },
  },
  //筛选
//下拉收回
sreenShow:function(){
  this.setData({
    sreenShow:!this.data.sreenShow,
  })
},
cancel:function(){
  this.setData({
    sreenShow:false
  })
},
//清空选择
clear:function(){
  console.log("clear已调用")
  for(var i=0,t=1000;i<t;i++){
    if(this.data.chooseItems[i]==null){
      break;
    }
    for(var m=0,n=1000;m<n;m++){
      if(this.data.chooseItems[i][m]==null){
        break;
      }
      this.data.chooseItems[i][m].selected=false
    }
  }
  this.setData({
    chooseItems:this.data.chooseItems
  })
},
//确认筛选
confirm:function(){
  this.setData({
    sreenShow:false, 
  })
},
sortShow:function(){
  this.setData({
    sortShow:!this.data.sortShow
  })
},
//点击遮罩层
mask:function(){
  this.setData({
    sreenShow:false,
    sortShow:false
  })
},
//选择类型
chooseType:function(e){
  const{index}=e.currentTarget.dataset;
  console.log(index);
  this.setData({
    typeCurrentIndex:index,
  })
},
//选择具体内容
chooseItem:function(e){
  this.data.chooseItems[this.data.typeCurrentIndex][e.target.dataset.index].selected=!this.data.chooseItems[this.data.typeCurrentIndex][e.target.dataset.index].selected
  this.setData({
    chooseItems:this.data.chooseItems,
  })
//选择的value值
let arr = this.data.chooseItems
let values = []
for(let key in arr) {
  arr[key].map(item => {
    if(item.selected) {
       values.push(item.value)
    }
  })
}
this.setData({
  chooseValues: values
})
},
//进入详情页
gotoArticleDetail: function (event) {
  // 当前要跳转到另一个界面,但是会保留现有界面
  wx.navigateTo({
    url: `../article-detail/article-detail?articleid=${event.currentTarget.dataset.articleid}`
  })
},
})

ArticleList格式

data: {
    ArticleList: [
      {
      title: "实验菜谱1",
      content: "简短简介",
      imgSrc: "/images/post/bl.png",
      detail: "这里是内容,对于内容的分布,目前只设置了一部分",
      dateTime: "24小时前",
      headImgSrc: "/images/post/bl.png",
      author: "admin",
      date: "Nov 20 2023",
      vavlue: ['001','002','003'],
      avatar: "/images/avatar/1.png",
      articleid: 1,
      },
…
我想要达到的结果

例如:chososevalues=‘001’,‘002’时把ArticleList.value中所有包含001和002的都保留下来,两个都不包含的项就删除

  • 写回答

1条回答 默认 最新

  • 林一怂儿 前端领域新星创作者 2022-08-20 17:26
    关注
    let ArticleList = [
      {
        title: "实验菜谱1",
        content: "简短简介",
        imgSrc: "/images/post/bl.png",
        detail: "这里是内容,对于内容的分布,目前只设置了一部分",
        dateTime: "24小时前",
        headImgSrc: "/images/post/bl.png",
        author: "admin",
        date: "Nov 20 2023",
        value: ['001', '002', '003'],
        avatar: "/images/avatar/1.png",
        articleid: 1,
      },
      {
        title: "实验菜谱1",
        content: "简短简介",
        imgSrc: "/images/post/bl.png",
        detail: "这里是内容,对于内容的分布,目前只设置了一部分",
        dateTime: "24小时前",
        headImgSrc: "/images/post/bl.png",
        author: "admin",
        date: "Nov 20 2023",
        value: ['001', '003'],
        avatar: "/images/avatar/1.png",
        articleid: 1,
      },
      {
        title: "实验菜谱1",
        content: "简短简介",
        imgSrc: "/images/post/bl.png",
        detail: "这里是内容,对于内容的分布,目前只设置了一部分",
        dateTime: "24小时前",
        headImgSrc: "/images/post/bl.png",
        author: "admin",
        date: "Nov 20 2023",
        value: ['003'],
        avatar: "/images/avatar/1.png",
        articleid: 1,
      },
      {
        title: "实验菜谱1",
        content: "简短简介",
        imgSrc: "/images/post/bl.png",
        detail: "这里是内容,对于内容的分布,目前只设置了一部分",
        dateTime: "24小时前",
        headImgSrc: "/images/post/bl.png",
        author: "admin",
        date: "Nov 20 2023",
        value: ['003', '004'],
        avatar: "/images/avatar/1.png",
        articleid: 1,
      },
    ]
    let chososevalues = ['001', '002']
    
    let result = ArticleList.filter(a => a.value.find(v => chososevalues.includes(v)))
    console.log(result);
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月29日
  • 已采纳回答 8月21日
  • 修改了问题 8月20日
  • 修改了问题 8月20日
  • 展开全部

悬赏问题

  • ¥15 按键修改电子时钟,C51单片机
  • ¥60 Java中实现如何实现张量类,并用于图像处理(不运用其他科学计算库和图像处理库))
  • ¥20 5037端口被adb自己占了
  • ¥15 python:excel数据写入多个对应word文档
  • ¥60 全一数分解素因子和素数循环节位数
  • ¥15 ffmpeg如何安装到虚拟环境
  • ¥188 寻找能做王者评分提取的
  • ¥15 matlab用simulink求解一个二阶微分方程,要求截图
  • ¥30 乘子法解约束最优化问题的matlab代码文件,最好有matlab代码文件
  • ¥15 写论文,需要数据支撑