基于设备的颜色色板的显示数

在我的产品列表模板页面上，我已经获得了显示产品可用颜色的颜色色板。在手机我只想显示第一个2，然后提供一个“更多可用”按钮，带您到特定的产品页面。在桌面我想显示第一个4，然后提供一个“更多可用”按钮，它也可以带您进入产品页面。基于设备的颜色色板的显示数

我可以显示和隐藏任何一个视口上的颜色（使用css），但是我怎样才能做出变量逻辑来计算何时在桌面和移动设备上提供“更多可用”按钮？

enter image description here

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; 
    } 
    } 
}

来源

2015-05-12 Liondedan

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

您可以使用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>

来源

2015-05-12 09:27:58

辉煌感谢对于那个阿方索来说，很好的解决方案 – Liondedan

您可以在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标签^^。

来源

2015-05-12 09:04:19

基于设备的颜色色板的显示数

回答

相关问题