weixin_33698043 2017-12-25 02:01 采纳率: 0%
浏览 22

“初始化” jQuery操作?

So I found this library at GitHub called jTinder, which basically allows me to setup cards that can be left swiped or right swiped. I setup the #tinderslide div: <div id="tinderslide"><ul></ul></div>

I set up the cards using a function:

function generate_cards(){
    $.ajax({
        url:"fetch_cards.php",
        method:"POST",
        data:{"user":user_id},
        success:function(data){
            try{
                var parsedData=JSON.parse(data);
                for(var i=0;i<parsedData.length;i++){
                    var elem="<li class=\"card \"+parsedData[i].id>";
                    elem+="<div class=\"card_wrap\">";
                    elem+=<img src=\""+parsedData[i].picture.url+"\">";
                    elem+="<div class=\"name_location_wrapper\">";
                    elem+="<span class=\"name\">"+parsedData[i].first_name+" "+parsedData[i].last_name+"</span>";
                    elem+="<span class=\"location\"></span>";
                    elem+="</div></div></li>";
                    $("#tinderslide ul").prepend(elem);
                }
                dfd.resolve();
            }
            catch(er){
                console.log(er);
            }
        }
    })
}

and called the jTinder action:

function init(){
        $("#tinderslide").jTinder({
            onDislike: function (item) {
                $(".last").remove();
                $(".card").last().addClass("last");
            },
            onLike: function (item) {
                $(".last").remove();
                $(".card").last().addClass("last");
            },
            animationRevertSpeed: 100,
            animationSpeed: 100,
            threshold: 2
        });
    }

I have d3d set up as a $.Deferred variable and once it's resolved, I call the init() function.

I add ".last" to the last card for changing the background according to what the current object is, since the cards are arranged in reverse order, i.e. the last element is the first.

I then add the first batch of cards from a PHP file, which works fine. I can add the first 10 cards and store the responses just fine.

Next, I checked if the number of cards in the stack is less than 5, in which case, I fetch the next 10 cards. Here lies the problem.

Since the #tinderslide div is already initialized with the jTinder method, I can't initialize it again. The closest I've come to a solution is to check whether the card stack is empty, use $("#tinderslide").remove() to remove the #tinderslide div entirely, and then add it again, append the next cards and reinitialized, which seems to be working for now.

However, my question is: is there a more efficient way to do this, without having to delete and recreate the div entirely?

  • 写回答

1条回答 默认 最新

  • weixin_33708432 2017-12-25 04:25
    关注

    I added a destroy function to the Plugin.prototype:

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

    and then called $("#tinderslide").data('plugin_jTinder').destroy();, which seems to work. Thanks to Roamer-1888 for the inputs!

    评论

报告相同问题?

悬赏问题

  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力