javascript - 显示具有特定类别 jQuery 的产品

Question

我有通过 API 获得的产品，我尝试使用 jQuery 创建目录。我正在使用两个不同的请求来获得两个不同的产品类别。由于 jQuery 上的 slice() 函数，我在多个页面上创建了目录，如下所示：

var $el = $("#wrap > div");
var pageSize = 9;
var page = 1;

$el.slice(0, pageSize).css({display: 'block'});
$el.slice(pageSize, $el.length).css({display: 'none'});

function addSlice(num){
  return num + pageSize;
}

function subtractSlice(num){
  return num - pageSize;
}

var slice = [0, pageSize];

这就是我展示产品的方式：

echo '<div id="wrap" class="wrap">';

foreach ($beds['moreProducts']['productWindow'] as $items)
{
        echo '<div class="bed_images" id="bed">';
        echo '<img data-enlargeable class="images" src=' . $items['mainImageUrl'] . '?f=xxs' . '/>';
        echo '<h2 class="img_title">' . $items['name'] . '</h2>';
        echo '<p class="img_price">' . $items['priceNumeral'] . ' ^b ' . '</p>';
        echo '<p class="img_description">' . $items['typeName'] . '</p>';
        echo '</div>';
}

foreach ($sofas['moreProducts']['productWindow'] as $items)
{
        echo '<div class="sofa_images" id="sofa">';
        echo '<img data-enlargeable class="images" src=' . $items['mainImageUrl'] . '?f=xxs' . '/>';
        echo '<h2 class="img_title">' . $items['name'] . '</h2>';
        echo '<p class="img_price">' . $items['priceNumeral'] . ' ^b ' . '</p>';
        echo '<p class="img_description">' . $items['typeName'] . '</p>';
        echo '</div>';
}

我创建了一个带有两个选项的选择选择器来显示一个或另一个。我首先尝试了 .hide 方法，但它只隐藏了显示的 9 个项目，然后我尝试了 .remove 方法，它看起来很有效，但它让我清空页面，直到我到达我的项目所在的页面（例如我有第 2-23 页是空的）所以我有点想知道我怎么能设法只显示选定的类别？

标签： javascriptphpjqueryslicecatalog