Question

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

要查看当前问题，请注意有5个服装项目，有2个具有销售属性的商品，如果在左侧导航栏中单击“销售”，则会看到显示的这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

在初始化过程中，您插入了所有产品，所以我遵循了这种方式。

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

更改类别：显示/隐藏

毕竟，过滤数据仅是为了快速浏览，但除非产品数量如此之多，否则我认为这是可以的。（如果您不喜欢它，则需要实现从数据到下一个/上一个索引的实现）

请帮助我使用该轮播

1 个答案: