数组的上一个和下一个按钮

Question

请转到该Codepen https://codepen.io/CodingGilbert/pen/xJGvQB?editors=1010

在所有项目都位于的主要部分中，所有内容都可以正常运行。但是，如果转到“服饰”，然后单击除第一个对象之外的任何对象的“快速查看”按钮，然后单击“下一步”，它将跳过数组的一项。我的意思是，即使我为新的过滤数组filteredData

更改了swapPopup的参数，上一个和下一个按钮的功能也无法像主要部分中那样工作。

这很难为我解释，但是如果您访问Codepen，转到“连衣裙”或“上衣”部分，单击除第一个项目以外的任何项目的快速查看按钮，然后打开控制台，您将看到我正在尝试的情况解释。在导航向导的所有部分中，都会发生此行为。但是，所有内容在所有项目所在的主要部分中都可以正常运行，这就是其中的怪异部分。

以下代码是与此功能相关的所有代码。 data是包含我所有38个对象的数组。非常感谢您的帮助。

const data = [
  {
    product: "Haori Jacket",
    url: "haorijacket.html",
    image: "img/haori-jacket.jpg",
    altDesc: "Jacket",
    price: "$210.00",
    category: "outwear"
  },
  {
    product: "Swing Dress",
    url: "swingdress.html",
    image: "img/swing-dress.jpg",
    altDesc: "Dress",
    price: "$218.00",
    category: "dresses"
  },
  {
    product: "Dusty Jumpsuit",
    url: "",
    image: "img/dusty-jumpsuit.jpg",
    altDesc: "Jumpsuit",
    price: "$299.00",
    sale: "$399.00",
    category: "dresses"
  },
  ...
 ];

// Generate template literal
const clothingView = (item, index) =>
    `<a href="${item.url}" class="shop-item">
    ${item.sale ? `<span class="shop-item__sale">Sale</span>`: ''}
      <img data-src=${item.image} alt="${item.altDesc}" class="shop-item__img">
      <div class="quickview">
        <span class="quickview__icon">Quick View</span>
        <span class="quickview__info">${item.product}
          <br>
          <span class="quickview__price">${item.price}
            ${item.sale ? `<span class="quickview__price--sale">${item.sale}</span>`: ''}
          </span>
        </span>
        <span class="shop-item__index">${index}</span>
      </div>
    </a>`;

// Append template literal to html structure based on category
data.map((item, index) => {
  const showItems = clothingView(item, index);

  $('.all-items').append(showItems);
  $('.' + item.category).append(showItems);
  item.sale ? $('.sale').append(showItems) : null
});

// Filtering data from array based on category
let navCategoryClicked;
let filteredData = [];
$('.categories__link').click(function() {
  navCategoryClicked = true;
  const category = this.id;
  let filteringData;

  if (category === 'bottoms') {
    filteringData = data.filter(el => el.category === 'bottoms');
  } else if (category === 'tops') {
    filteringData = data.filter(el => el.category === 'tops');
  } else if (category === 'outwear') {
    filteringData = data.filter(el => el.category === 'outwear');
  } else if (category === 'accessories') {
    filteringData = data.filter(el => el.category === 'accessories');
  } else if (category === 'dresses') {
    filteringData = data.filter(el => el.category === 'dresses');
  } else {
    filteringData = data.filter(el => el.sale);
  }

  filteredData = filteringData;
  console.log(filteredData);
});

// Change clothing-item popup window img and info
const swapPopup = clothing => {
  $('#clothingLink').prop('href', clothing.url)
  $('#clothingImg').prop('src', clothing.image)
  $('#clothingName').text(clothing.product)
  $('#clothingPrice').text(clothing.price)
  clothing.sale ? $('#clothingSale').text(clothing.sale) : $('#clothingSale').text(null)
};

// Change cloting-item img and info
let currentPopup;
$('.quickview__icon').click(function(e) {
  event.preventDefault();
  $('.overlay').css({'opacity': '1', 'visibility': 'visible'});

  currentPopup = $(e.target).parent().children('.shop-item__index').text();
  swapPopup(data[currentPopup]);
});

let dataArr;
$('#popupPrev').click(function() {
  navCategoryClicked != true ? dataArr = data : dataArr = filteredData;
  currentPopup > 0 ? --currentPopup : currentPopup = dataArr.length - 1;
  swapPopup(dataArr[currentPopup]);
  console.log(currentPopup);
});

$('#popupNext').click(function() {
  navCategoryClicked != true ? dataArr = data : dataArr = filteredData;
  currentPopup < dataArr.length -1 ? ++currentPopup : currentPopup = 0;
  swapPopup(dataArr[currentPopup]);
  console.log(currentPopup);
});