Question

有一种方法可以在文档加载时触发混合效果至少6次？我已经准备好了一次，但我需要至少6次。

我尝试了很多东西，甚至编辑了js，但我不知道你在哪个部分说出了要执行多少次动作。

$(document).ready(function(){

        $(function(){
        console.log("press");
        $('#Container').mixItUp();
        $('#shuffle').click();      

        });

});

<div class="index">
<div class="row-fluid">
  <div class="span12">
            <input type="button" class="sort" data-sort="random" id="shuffle"      name="shuffle" value="shuffle" >
            <input type="hidden" id="Errores" value="0" />
    <div class="row-fluid">
    <div class="span8" id="Container">

      <div class="card-container span2 mix category-2" data-value="1" id="naipe1" onclick="VoltearNaipe('#naipe1')" >
        <div class="card">
            <input type="hidden" id="naipe1valor" value="1" />
            <input type="hidden" id="naipe1par" value="1" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/naipe2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->

     <div class="card-container span2 mix category-2"  data-value="2" id="naipe2"  onclick="VoltearNaipe('#naipe2')" >
        <div class="card">
            <input type="hidden" id="naipe2valor" value="1" />
            <input type="hidden" id="naipe2par" value="1" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/naipe2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->


    <div class="card-container span2 mix category-1"  data-value="3" id="naipe3"  onclick="VoltearNaipe('#naipe3')" >
        <div class="card">
            <input type="hidden" id="naipe3valor" value="2" />
            <input type="hidden" id="naipe3par" value="2" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->

    <div class="card-container span2 mix category-1"   data-value="4" id="naipe4"  onclick="VoltearNaipe('#naipe4')" >
        <div class="card">
            <input type="hidden" id="naipe4valor" value="2" />
            <input type="hidden" id="naipe4par" value="2" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->


    <div class="card-container span2 mix category-1"  data-value="5"  id="naipe5"  onclick="VoltearNaipe('#naipe5')" >
        <div class="card">
            <input type="hidden" id="naipe5valor" value="2" />
            <input type="hidden" id="naipe5par" value="3" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta3.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->

    <div class="card-container span2 mix category-1"  data-value="6" id="naipe6"  onclick="VoltearNaipe('#naipe6')" >
        <div class="card">
            <input type="hidden" id="naipe6valor" value="2" />
            <input type="hidden" id="naipe6par" value="3" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta3.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->

    </div><!--- span8--->
    <div class="span4">
        <div class="row-fluid">
            <div class="contador span12"><span2 id="contadorpuntos">0</span2></div>
            <div class="span12">
                <p>
                    Da click en 2 imágenes y 
                    si el par coincide 
                    acumulas puntos.
                    ¡Puedes canjear tus 
                    puntos por descuentos 
                    increíbles!

                </p>

                <div class="span5 vidas">
                    <div class="span2"><img src="css/img/heart.jpg" id="vida1" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida2" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida3" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida4" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida5" class="" alt=""></div>
                </div>
            </div>
        </div><!-- /.row-fluid -->
    </div><!-- /.span4 -->
    </div><!---row-fluid --->
  </div><!--- span212--->

Answer 1

您可以通过设置超时事件来执行此操作，如以下块中所示：

setTimeout(
    function(){
        $('#Container').mixItUp('sort', 'random');
    }, 1000
)
setTimeout(
    function(){
        $('#Container').mixItUp('sort', 'random');
    }, 2000
)
setTimeout(
    function(){
        $('#Container').mixItUp('sort', 'random');
    }, 3000
)

但该代码可能已经过优化。

旁注：您应该使用html特殊字符作为西班牙语标点符号和重音符号（á，í，¡）

用mixitup js重复几次效果

1 个答案: