jquery - 如果项目数小于 X，jcarousel 隐藏两个箭头

Question

所以我有这段代码，我尝试将它放入.load并.ready运行，但它不起作用，因为轮播还没有完全加载。

var num_rec = "${recProducts.size()}";
if(num_rec < 5){
    jQuery(".jcarousel-prev").attr("disabled", true);
    jQuery(".jcarousel-next").attr("disabled", true);
    jQuery(".jcarousel-clip").attr("style", 'postion:relative; width:312px;');
}

现在此代码运行，但被轮播选项覆盖。我可以使用轮播的选项来运行一个函数来运行此代码吗？

如果我的轮播中只有四个东西，那么就不需要显示任何分页，因为所有四个东西都会显示，所以我想完全删除分页并使容器更大一点，这样图片就不会被切断。如果有超过 4 个虽然我需要分页。

Answer 1

哈！我为实际的样式表写了一个额外的样式。这不是我想要的，但它确实有效。使用 CSS 可见性是有效的，因为使用它的轮播插件没有向元素添加内联样式。

if(num_rec < 5){                
    document.styleSheets[0].addRule(".pdp-main .recommendations .jcarousel-next", "visibility:hidden;");
    document.styleSheets[0].addRule(".pdp-main .recommendations .jcarousel-prev", "visibility:hidden;");
}

对于 FireFox，您必须改用 insertRule。

我仍然想知道是否有更清洁的方法来做到这一点。jQuery Rule 插件对我不起作用。

Answer 2

简化的 JQuery 方法：

var total_items = jcarousel.find('li').length;
if(total_items < 5)
{                
    $('.jcarousel-control-prev, .jcarousel-control-next, .jcarousel-pagination').hide();
}

Answer 3

  var items = $('.carousel-navigation').jcarousel('items');
  total_items=items.length;
  if(total_items < 5){                
    $('.prev-navigation, .next-navigation').hide();
  }