显示基于设备的色样数

Question

在我的产品列表模板页面上，我有颜色样本，显示产品的可用颜色。在移动上，我只想显示前2 ，然后提供“更多可用”按钮，您可以转到特定产品页面。在桌面上，我想显示前4个，然后提供“更多可用”按钮，该按钮也会引导您进入产品页面。

我可以显示和隐藏任一视口上的可用颜色（使用css），但是如何在桌面和移动设备上提供“更多可用”按钮时，我将如何处理变量逻辑？

HTML：

<!— Product —>
<div class=“product”>
 <div class=“colour-swatches”>
  <ul>
    <li class=“swatch">Red</li>
    <l class=“swatch"i>Blue</li>
    <li class=“swatch">Green</li>
    <li class=“swatch">Orange</li>
    <li class=“swatch">Yellow</li>
    <li class=“swatch">Black</li>
    <li class=“swatch">Lime</li>
  </ul> 
</div>
</div>

CSS：

Li.swatch {

  &:nth-child(-n+2) {
      display: block !important;
      visibility: visible !important;
  }

  @media (min-width: 600px) {

      &:nth-child(-n+3) {
          display: block !important;
          visibility: visible !important;
   }
  }
}

Answer 1

列表中包含所有可用的颜色，对吗？ （即使是那些不可见的）。如果是这样，您可以只计算可用颜色的总数以及当前显示的颜色数。如果显示所有可用颜色，那么您不会显示更多可用链接，如果没有，则显示它。

您可以使用jQuery的:visible选择器来查找列表中当前有多少颜色可见（在当前视口中）：

http://jsfiddle.net/cms8s720/

var all = $('ul li').length,
    visible = $('ul li:visible').length;

if(all - visible > 0) {
    $('#avail').html( (all - visible) + ' more colors available');
}

/* Simplified this for testing. This should work with your CSS */
/* Feel free to experiment with the nth-child value in here */

li:nth-child(n+3) {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
 <div class="colour-swatches">
  <ul>
    <li class="swatch">Red</li>
    <li class="swatch">Blue</li>
    <li class="swatch">Green</li>
    <li class="swatch">Orange</li>
    <li class="swatch">Yellow</li>
    <li class="swatch">Black</li>
    <li class="swatch">Lime</li>
  </ul> 
</div>
</div>
<span id="avail"></span>

Answer 2

你可以在jQuery中轻松实现这一点。您需要根据颜色样本列表的长度执行if语句。正如您有条件地为两种不同尺寸做的那样，我建议如下：

首先制作一个函数，其中包含以下内容

if ($(window).width() <= MOBILESIZEUSED) {    

    if ($("colour-swatches > ul").length > 2){
        ...code to show more available...
    }
} else {
    if ($("colour-swatches > ul").length > 4){
        ...code to show more available...
    }
}

然后您需要拥有以下代码：

$(window).resize(functionNameHere);
functionNameHere();

这意味着它会在调整大小时运行并最初运行。这应该适合你。您的代码中也有错误的li标签^^。