3

我有一个关于 jCarousel 插件的问题（来自 sorgalla）。如何以正确的方式从中删除项目？

你可以看到我在这里走了多远。尝试删除一些项目，然后向右滚动，您最终会看到“空滚动”，这就是我想要摆脱的。

我试过使用 remove(); jQuery 函数而不是更改 css 以显示：无；但这会在该项目曾经所在的位置产生一个奇怪的白色空白区域。如果您查看第 400 行的 jquery.jcarousel.js，您会看到一个删除功能，但我不确定如何使用它。

任何帮助深表感谢。谢谢！

4

5 回答 5

8

你的例子是有道理的，除了因为你超出了插件的范围，jCarousel 不知道自己更新。从文档中，您提到的 remove() 方法似乎可行。然而，在我的试验中，我永远无法让 jCarousel 对象真正“做正确的事情”并更新它的按钮、滚动等。

正因为如此，我在 jCarousel 类上写了一个额外的方法来做这件事。您调用 removeAndAnimate(1) 删除轮播中的第一项并重建所有内容，以便启用/禁用下一个/上一个按钮，工作正常。

另外值得注意的是，jCarousel 提供的 remove() 函数可防止您删除当前正在显示的项目，这正是我们想要做的（例如，允许用户通过单击从轮播中删除图像） .

removeAndAnimate(i) 的实现：

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();

    }

我建议将它直接放在 remove() 实现之后。要在回调函数之外使用 jQuery 访问 jCarousel 实例本身：

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

那应该工作！

于 2010-05-19T20:05:22.587 回答
1 
$.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-20T11:04:35.040 回答
1

我结合了你的两个答案，因为没有一个对我有用..

我在我的初始化自定义函数中添加了它

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-17T13:14:17.147 回答
0

我发现白盒子的问题来自哪里。JCarousel 方法 format() 不会替换类名，而只是添加新的。我重写了这个函数，它对我很有效： 

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-19T20:31:21.547 回答
0

我的另一个解决方案是向我加载的内容添加一个类，并删除 DOM 中没有此类的所有项目。一旦被 删除carousel.reset()，这些元素就会系统地失去添加的类。

然后，您将能够使用以下方法删除白框：

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

carousel.add()在函数之后添加它。

它运行良好，您甚至不必向轮播添加任何功能。

这是一个“易于使用”的解决方案，单击上一个/下一个按钮可能会显示一个白框。要删除它，请在回调buttonNextCallback/上应用相同的解决方案buttonPrevCallback。

于 2011-07-20T15:15:40.720 回答