從jCarousel插件中刪除一個項目

我有一個關於jCarousel插件（來自sorgalla）的問題。我如何從正確的方式中刪除項目？從jCarousel插件中刪除一個項目

你可以看到我走了多遠here。嘗試刪除一些項目，然後向右滾動，最終會看到一個「靜態滾動」，這就是我想要擺脫的。

我試過使用remove（）; jQuery的功能，而不是改變CSS顯示：無;但是會產生一個奇怪的白色空白區域，該區域曾經是。如果你看看第400行的jquery.jcarousel.js，你會看到一個remove函數，但我不確定如何使用它。

任何幫助，非常感謝。謝謝！

來源

2010-04-15 Stefan T

你的例子是有道理的，除非你超出了插件的範圍，jCarousel不知道自己要更新。從文檔看來，您提到的remove（）方法似乎可行。然而，我的試驗，我永遠不可能得到的jCarousel對象實際上「做正確的事情」，並更新它的按鈕，滾動等。

因爲這一切，我寫了一個額外的方法在jCarousel類確切的說。您可以調用removeAndAnimate（1）移除傳送帶中的第一個項目並重建所有內容，以便下一個/上一個按鈕被啓用/禁用。

另外值得注意的是，jCarousel提供的remove（）函數可以防止您刪除當前正在顯示的項目，這正是我們想要做的事情（允許用戶通過單擊它來從旋轉木馬中刪除圖像，例如）。

爲removeAndAnimate（一）履行：

removeAndAnimate: function(i) { 

     var e = this.get(i); 

     var d = this.dimension(e); 

     if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px'); 

     e.remove(); 
     this.options.size--; 

     var di = this.options.visible != null ? Math.ceil(this.clipping()/this.options.visible) : null; 
     var li = this.list.children('li'); 
     var self = this; 

     if (li.size() > 0) { 
      var wh = 0, i = this.options.offset; 
      li.each(function() { 
       self.format(this, i++); 
       wh += self.dimension(this, di); 
      }); 

      this.list.css(this.wh, wh + 'px');    
     } 

     this.scroll(0,true); 
     this.buttons(); 

    }

我建議刪除（）實施後直接把這個。使用jQuery訪問jCarousel實例本身，在回調函數之外：

var carousel = $("#mycarousel").data("jcarousel"); 
carousel.removeAndAnimate(1);

這應該工作！

來源

2010-05-19 20:05:22 Macfanatic

這很好。我最終選擇了一個不同的插件。 – 2011-01-18 05:53:29

我發現白盒子的問題來自哪裏。 JCarousel方法的格式（）不會替換類名稱，而只是添加新類。我已經重寫了該功能，它很適合我：

format: function(e, i) { 
     // remove all class names matches 'jcarousel-item' at the start 
     $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, ''); 
     // add new class names 
     var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({ 
      'float': 'left', 
      'list-style': 'none' 
     }); 
     $e.attr('jcarouselindex', i); 
     return $e; 
}

來源

2010-07-19 20:31:21 Jamland

我既結合你的答案，因爲沒有工作對我來說..

我說這在我的初始化自定義函數

carousel.removeAndAnimate = function(i) { 
      var counter = 1;  
      var itemsHTML = new Array(); 
      var e = this.get(i); 
      children = e.parent().find("li"); 
      $(e).remove() 
      $.each(children,function(){ 
       if(counter != i) { 
        itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
       } 
       counter++; 
      }); 
      this.size(this.options.size -1); 
      this.reset(); 
      counter = 1; 
      carousel = this; 
      $.each(itemsHTML, function(k, v){ 
       if(v != null) { 
        carousel.add(counter, v[0].innerHTML); 
        counter++; 
       } 
      }); 
      this.reload(); 
     }

它運作良好。

您可以添加更多的改進，例如滾動回到剛刪除位置的項目。

來源

2011-01-17 13:14:17 Adi

這一個爲我工作，謝謝 – 2012-12-13 11:19:23

$.jcarousel.fn.extend({ 
    removeAndAnimate: function(index) { 

     var itemsHTML = new Array(); 
     var counter = 0; 

     // Me guardo los que quedan 
     for(i = 0; i < this.size(); i++) 
     { 
      if(i != (index - 1)) 
       itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html(); 
     } 

     // Configuro uno menos y borro todo 
     this.size(this.options.size -1); 
     this.reset(); 


     // Vuelvo a cargarlos 
     counter = 0; 
     for(i = 0; i < itemsHTML.length; i++) 
     { 
      this.add(counter++, itemsHTML[i]); 
     } 

     this.reload(); 
    } 
});

用法

var carousel = jQuery('#mycarousel').data('jcarousel'); 
carousel.removeAndAnimate(1);

來源

2011-04-20 11:04:35 Leonardo

我的另一個解決方案是一個類添加到我的加載的內容，並刪除所有沒有這個類在DOM的項目。一旦被「刪除」carousel.reset()，這些元素系統地失去了添加的類。

您將能夠然後與去除白框：

$("li:not(.the_class)").remove();

添加它只是carousel.add()功能之後。

它工作的很好，你甚至不必爲你的傳送帶添加任何功能。

這是一個「易於使用」的解決方案，單擊prev/next按鈕可能會顯示一個白色框。要將其刪除，請在回調buttonNextCallback/buttonPrevCallback上應用相同的解決方案。

來源

2011-07-20 15:15:40 Codzeen

從jCarousel插件中刪除一個項目

回答

相關問題