Javascript 在Wix中通过多个选择标记筛选中继器项目

我正在构建一个wix网站，其中包含一个数据收集（项目），其中包含多个选择标记字段（部门标记、组织标记、部门标记、状态标记）。我在我的网站上创建了一个转发器来显示数据收集，并希望根据多个选择标记过滤器过滤显示的项目

目前，我仅根据一组选择标记（departmentTags）筛选列表。因此，当选择departmentTag时，将过滤属于该部门的项目列表

import wixData from 'wix-data';

const collectionName = 'projects';

$w.onReady(function () { 

    setRepeatedItemsInRepeater()
    loadDataToRepeater()

    $w('#departmentTags').onChange((event) => {
        const selectedTags = $w('#departmentTags').value
        loadDataToRepeater(selectedTags)
    })
    
});

function setRepeatedItemsInRepeater() {
    $w('#projectRepeater').onItemReady(($item, itemData) => {

        $item('#projectImage').src = itemData.Image;
        $item('#projectTitle').text = itemData.Title;
        $item('#projectSummary').text = itemData.Summary;

    })
}

function loadDataToRepeater(selectedCategories = []) {

    let dataQuery = wixData.query(collectionName)

    if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasAll('department', selectedCategories)
    }
    
    dataQuery
        .find()
        .then(results => {
            const itemsReadyForRepeater = results.items
            $w('#projectRepeater').data = itemsReadyForRepeater;
        })
}

---

现在，我还希望在筛选项目时包含其余的选择标记。例如，我希望用户能够选择部门、组织和状态，并且中继器上列出的项目将按所有三个类别进行筛选。

听起来您需要将所有标记元素的

onChange

设置为如下功能：

function tagChange() {
  const selectedDepts = $w('#departmentTags').value;
  const selectedOrgs = $w('#organizationTags').value;
  const selectedStatuses = $w('#statusTags').value;

  loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses);
}

function loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses) {

    wixData.query(collectionName)
      .hasAll('department', selectedDepts)
      .hasAll('organization', selectedOrgs)
      .hasAll('status', selectedStatuses)
      .find()
      .then(results => {
        $w('#projectRepeater').data = results.items;
      });
}

然后，修改

loadDataToRepeater

函数如下所示：

function tagChange() {
  const selectedDepts = $w('#departmentTags').value;
  const selectedOrgs = $w('#organizationTags').value;
  const selectedStatuses = $w('#statusTags').value;

  loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses);
}

function loadDataToRepeater(selectedDepts, selectedOrgs, selectedStatuses) {

    wixData.query(collectionName)
      .hasAll('department', selectedDepts)
      .hasAll('organization', selectedOrgs)
      .hasAll('status', selectedStatuses)
      .find()
      .then(results => {
        $w('#projectRepeater').data = results.items;
      });
}