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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery swapsies不适用于多个动作

1 个答案: