從jtinder中的服務器動態加載圖像

Question

我正在使用jtinder創建類似tinder的效果。 這是圖書館。

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

滑動第四張圖片后對服務器進行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下的主數據中，刪除並重新初始化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() 。