Question

我正在使用jtinder来创建更好的效果。这是图书馆。

  https://github.com/do-web/jTinder

当用户在第一次调用页面时加载的5个图像中的第4个图像上时，我想动态添加图像。

这里是有人用来进行动态调用的javascript，但我没有得到如何从服务器调用数据作为模式，所有图像的名称每次都会有所不同。

      $.fn[ pluginName ] = function (options) {
    this.each(function () {

        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin(this, options));
        }
        else {
            $.data(this, "plugin_" + pluginName).bindNew(this);
        } 

    });

    return this;
};

刷过第4张图片后对jquery / ajax调用服务器的任何帮助都会很有帮助

Answer 1

在jTinder.js中添加一个destroy方法到插件原型：

destroy: function(element){
    $(element).unbind();
    $(this.element).removeData();
}

像这样：

     init: function (element) {

        container = $(">ul", element);
        panes = $(">ul>li", element);
        pane_width = container.width();
        pane_count = panes.length;
        current_pane = panes.length - 1;
        $that = this;

        $(element).bind('touchstart mousedown', this.handler);
        $(element).bind('touchmove mousemove', this.handler);
        $(element).bind('touchend mouseup', this.handler);
    },

    destroy: function(element){
        $(element).unbind();
        $(this.element).removeData();
    }

    showPane: function (index) {
        panes.eq(current_pane).hide();
        current_pane = index;
    },

然后创建一个函数addcard（），首先从JSON源获取所需数据，将其添加到tinderslide下的main，删除然后重新初始化jTinder事件。

function addcard(){
    $.getJSON("example.json",function(data){
        //assign the data
        var elem="<li>"+data+"</li>";
        //delete existing jTinder event
        $("#tinderslide").data('plugin_jTinder').destroy();
        //reinitialize new jTinder event
        $("#tinderslide").jTinder({
            onDislike:function(){
                doSomething();
            }
            onLike:function(){
                doSomethingElse();
            }
        });
    });
}

每当您需要添加新卡时，请致电addcard()。

在jtinder中从服务器动态加载图像

1 个答案: