jQuery swapsies 不适用于多个 Action

Question

我使用 jQuery 交换卡片。我想让交换播放直到数组一个一个地具有值

我做了基于数组的函数。

我如何克服这个结果应该是一旦数组中的第一对被交换然后第二对应该开始交换

我也看到了一些回调函数的例子，因为 jquery 插件 JQuery Swapsies plugin 交换完成后返回回调函数

HTML

    <div class="Blocks">
            <div class="cards" id="div_1"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_2"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_3"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_4"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_5"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_6"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_7"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_8"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_9"><img src="images/ilogo.png"></div>
    </div>
    <div class="actionbar">
        <a href="javascript://" class="go-swap">Go Swap!</a>
    </div>

CSS

<style>
    .cards {
        width:160px;
        height:200px;
        border:1px solid #00F;
        border-radius:5px;
        float:left;
        margin:5px;
        text-align:center;
        padding:5px;
    }
    .cards img
    {
        width:90%;
        margin-top:10%;
    }
    .Blocks
    {
          display: block;
        width: 550px;
        height: auto;
        float: left;
            clear:both;
    }
    .actionbar
    {
        clear:both;
        float:left;
        width:100%;
    }
</style>

脚本

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-swapsies.js" type="text/javascript"></script>

    <script>
    $(document).ready(function() { 

            var swapperarray = [];
            swapperarray[0] = ['div_3', 'div_1'];
            swapperarray[1] = ['div_3', 'div_4'];
            swapperarray[2] = ['div_7', 'div_8'];
            swapperarray[3] = ['div_9', 'div_2'];
            swapperarray[4] = ['div_2', 'div_7'];
            swapperarray[5] = ['div_5', 'div_6'];
            swapperarray[6] = ['div_8', 'div_7'];
            swapperarray[7] = ['div_1', 'div_4'];
            swapperarray[8] = ['div_6', 'div_9'];
            swapperarray[9] = ['div_3', 'div_7'];


            $.each( swapperarray, function( key, value ) {
                 var valuers = value;
                 var arrasssy = valuers.toString().split(",");
                 GoCards(arrasssy[0],arrasssy[1])
            });
    });
    function GoCards(div1,div2)
    {
        //alert("sdv")
        $('#'+div1).swap({  
                    target: div2, // Mandatory. The ID of the element we want to swap with  
                    opacity: "1", // Optional. If set will give the swapping elements a translucent effect while in motion  
                    speed: 1000, // Optional. The time taken in milliseconds for the animation to occur  
                    callback: function() { // Optional. Callback function once the swap is complete  
                    }  
         }); 
    }
</script>

Answer 1

我已经使用递归函数动态创建交换选项查看链接

http://plnkr.co/edit/fmDsGTcmIMy2ppobRD8v?p=preview

// Code goes here
 $(document).ready(function() {

    var swapperarray = [];
    swapperarray[0] = ['div_3', 'div_1'];
    swapperarray[1] = ['div_3', 'div_4'];
    swapperarray[2] = ['div_7', 'div_8'];
    swapperarray[3] = ['div_9', 'div_2'];
    swapperarray[4] = ['div_2', 'div_7'];
    swapperarray[5] = ['div_5', 'div_6'];
    swapperarray[6] = ['div_8', 'div_7'];
    swapperarray[7] = ['div_1', 'div_4'];
    swapperarray[8] = ['div_6', 'div_9'];
    swapperarray[9] = ['div_3', 'div_7'];
    
   $('#'+swapperarray[0][0]).swap(createOptions(swapperarray))

             
});
    
function createOptions(swapperarray){
   var obj = {};
   var pair = swapperarray.shift();
    obj.target = pair[1];
    obj.opacity = "1";
    obj.speed = 1000;
  if(swapperarray.length > 0)
  {
    obj.callback = function (){ /* add class to div here*/ $('#'+swapperarray[0][0]).swap(createOptions(swapperarray)) }
  }
  else 
  {
    obj.callback = function (){ /* add class to div here*/}
  }
  return obj;
}
    

.cards {
        width:160px;
        height:200px;
        border:1px solid #00F;
        border-radius:5px;
        float:left;
        margin:5px;
        text-align:center;
        padding:5px;
    }
    .cards img
    {
        width:90%;
        margin-top:10%;
    }
    .Blocks
    {
          display: block;
        width: 550px;
        height: auto;
        float: left;
            clear:both;
    }
    .actionbar
    {
        clear:both;
        float:left;
        width:100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>

   
    <div class="Blocks">
      <div class="cards" id="div_1">
        div1
      </div>
      <div class="cards" id="div_2">
        div2
      </div>
      <div class="cards" id="div_3">
        div3
      </div>
      <div class="cards" id="div_4">
        div4
      </div>
      <div class="cards" id="div_5">
        div5
      </div>
      <div class="cards" id="div_6">
        div6
      </div>
      <div class="cards" id="div_7">
        div7
      </div>
      <div class="cards" id="div_8">
        div8
      </div>
      <div class="cards" id="div_9">
        div9
      </div>
    </div>
    <div class="actionbar">
      <a href="javascript://" class="go-swap" >Go Swap!</a>
    </div>