请帮我这个旋转木马

Question

首先，这是一个codepen示例https://codepen.io/CodingGilbert/pen/xJGvQB?editors=1010

要查看当前的问题，请注意有5个服装项目，有2个具有销售属性的项目，如果您在左侧导航中点击销售，您将看到这两个项目显示在新的部分。在该部分（销售）中，如果您单击第一个项目上的快速查看按钮，弹出窗口将显示，但如果您单击下一个按钮，您将看到不属于该部分的项目（亚麻顶部项目）。发生这种情况是因为在主要部分中，此项目位于具有sale属性的2个项目之间。

我相信这个例子足以说明问题，所有部分都会发生这种情况。我确实知道为什么会这样，但我看不出如何解决这个问题......在JS代码下面。

var data = [
  {
    product: "Haori Jacket",
    url: "",
    image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4f67e4b00b2c2a29ab00/1443712877696/lauren-winter-haori-jacket_0250.jpg?format=750w",
    altDesc: "Jacket",
    price: "$210.00",
    outwear: ""
  },
  {
    product: "Swing Dress",
    url: "swingdress.html",
    image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d5226e4b0e3eb29871ecf/1443713579307/lauren-winter-swing-dress_0183.jpg?format=750w",
    altDesc: "Dress",
    price: "$218.00",
    dress: ""
  },
{
    product: "Jane Skirt",
    url: "",
    image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4d8fe4b0f1182e35da9a/1443712404868/kimem-long-pleated-skirt-black_0354.jpg?format=750w",
    altDesc: "Shirt",
    price: "$150.00",
    sale: "$263.00",
    bottom: ""
  },
  {
    product: "Linen Top",
    url: "",
    image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d542ae4b088b5adb66691/1443714094740/ulihu-blue-linen-crop-top_0320.jpg?format=750w",
    altDesc: "Jacket",
    price: "$125.00",
    outwear: ""
  },
  {
    product: "Romy Top",
    url: "",
    image: "https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d4e8be4b08ac15504170b/1443712656147/kimem-romy-dolman-top_0146.jpg?format=750w",
    altDesc: "Blouse",
    price: "$199.00",
    sale: "$300.00",
    top: ""
  }
];

// Generate template literal
function clothingView(item, index) {
  return (`
    <a href="${item.url}" class="shop-item">
    ${item.sale ? `<span class="shop-item__sale">Sale</span>`: ''}
      <img 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
for (var i = 0; i < data.length; ++i) {
  const viewItems = clothingView(data[i], i);

  $('.all-items').append(viewItems);
  if ('accessory' in data[i]) { $('.accesories').append(viewItems); }
  if ('sale' in data[i]) { $('.sale').append(viewItems); }
};

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

// Open popup window by clicking quickview btn
var currentPopup = 0;
$('.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]);
});

// Popup prev and next buttons functionality
$('#popupPrev, #popupNext').click(function() {
  var end = data.length - 1;
  var direction = $(this).attr('id') === 'popupPrev' ? -1 : 1;
  currentPopup = Number(currentPopup) + direction;
  currentPopup = currentPopup < 0 ? end : currentPopup > end ? 0 : currentPopup;
  swapPopup(data[currentPopup]);
});

// Close popup window
  $('#closeIcon').click(function() {
  $('.overlay').css({
    'opacity': '0', 
    'visibility': 'hidden'});
  });

//Show clothing items by clicking nav categories
  $('.categories__link').click(function(){

    function showingSection(e) {
      $(e).fadeIn('slow');
      $(e).css('display', 'flex');
    };

    $('.products').css('display', 'none');
    showingSection('.' + this.id);
  });

// Hide sale icon on clothing-item hovering
  $('.shop-item').hover(
    function() { // Mouse in
    $('.shop-item__sale', this).fadeOut();
    },
    function() { // Mouse out
    $('.shop-item__sale', this).fadeIn();
    }
  );

Answer 1

你几乎可以达到解决方案。在这种情况下，您可以使用grep或filter。我认为你应该在点击类别时准备'filteredData'。

var filteredData = $.grep(data,
    function(record) {
        // if it has a sale column
        return (record.sale);
        // specific category
        // return (record.category === 'xxx');
    }
);

也许还有其他方法，但目的是相同的，你需要缩小数据范围。

[更新]更多细节。 here

[UPDATED2]好的，我现在看到你的所有代码。看来你需要一些工作。我给你看一个例子，如果你愿意，你可以拿起必要的零件。 link

在init过程中，您插入了所有产品，因此我遵循这种方式。

初始化过程：数据插入（全部）

更改类别：显示/隐藏

毕竟，过滤数据仅用于快速查看，但我认为除非产品数量如此之大，否则它是可以的。 （如果你不喜欢它，你需要实现从数据中获取下一个/ prev索引）