2015-11-03 57 views
-5

好傢伙我已經創建了jQuery的功能如下點擊一個按鈕的功能:如何觸發使用jQuery

i = 0; 
j = 0; 

setInterval(function() { 
if (i < 15) { 
    secondPlay(); 
    i++; 
}}, 1000); 


setInterval(function() { 
if (j < 15) { 
    secondPlay1(); 
    j++; 
}}, 1000); 

function secondPlay() { 
    $("body").removeClass("play"); 

    var aa = $("ul.secondPlay li.active"); 
    var ii = $('ul.secondPlay li:last-child').val(); 
    if (aa.html() == undefined) { 
     aa = $("ul.secondPlay li").eq(0); 
     aa.addClass("before") 
      .removeClass("active") 
      .next("li") 
      .addClass("active") 
      .closest("body") 
      .addClass("play"); 

    } 
    if (aa.is(":last-child")) { 
     $("ul.secondPlay li").removeClass("before"); 
     aa.addClass("before").removeClass("active"); 
     aa = $("ul.secondPlay li").eq(0); 
     aa.addClass("active") 
      .closest("body") 
      .addClass("play"); 
    } 
    else { 
     $("ul.secondPlay li").removeClass("before"); 
      aa.addClass("before") 
      .removeClass("active") 
      .next("li") 
      .addClass("active") 
      .closest("body") 
      .addClass("play"); 
    } 

} 
function secondPlay1() { 
    $("body").removeClass("play"); 
    var aa = $("ul.secondPlay1 li.active"); 

    if (aa.html() == undefined) { 
     aa = $("ul.secondPlay1 li").eq(0); 
     aa.addClass("before") 
      .removeClass("active") 
      .next("li") 
      .addClass("active") 
      .closest("body") 
      .addClass("play"); 

    } 
    else if (aa.is(":last-child")) { 
     $("ul.secondPlay1 li").removeClass("before"); 
     aa.addClass("before").removeClass("active"); 
     aa = $("ul.secondPlay1 li").eq(0); 
     aa.addClass("active") 
      .closest("body") 
      .addClass("play"); 
    } 
    else { 
     $("ul.secondPlay1 li").removeClass("before"); 
     aa.addClass("before") 
      .removeClass("active") 
      .next("li") 
      .addClass("active") 
      .closest("body") 
      .addClass("play"); 
    } 

} 

HTML是如下:

<ul class="flip secondPlay"> 
     <li class=""> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">0</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">0</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="0"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="1"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">4</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">4</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="2"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="3"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">5</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">5</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="4"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">6</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">6</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="5"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">3</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">3</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="6"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">2</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">2</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="7"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">1</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">1</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="8"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">6</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">6</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="9"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">8</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">8</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="10"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">2</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">2</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="11"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">1</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">1</div> 
       </div> 
      </a> 
     </li> 
        <li class="" value="12"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">9</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">9</div> 
       </div> 
      </a> 
     </li> 
        <li class="before" value="13"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
      </a> 
     </li> 
        <li class="active" value="14"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">7</div> 
       </div> 
      </a> 
     </li> 
        <li value="15"> 
      <a href="#"> 
       <div class="up"> 
        <div class="shadow"></div> 
        <div class="inn">8</div> 
       </div> 
       <div class="down"> 
        <div class="shadow"></div> 
        <div class="inn">8</div> 
       </div> 
      </a> 
     </li> 
      </ul> 

我創建了一個按鈕與HTML作爲

<div class="buttons"> 
     <button id="trigger">Result!</button> 
    </div> 

在按鈕trigger的點擊我要調用的函數secondPlaysecondPlay1

如何播放按鈕,此功能單擊

setInterval(function() { 
if (i < 15) { 
    secondPlay(); 
    i++; 
}}, 1000); 

功能完成15次迭代,我想表明在價值2兩個divs我怎樣才能做到這一點

+0

你能分享一個jsFiddle嗎? – sahil

+0

'$(document).on('click','#trigger',function(){do something click when});'? –

+0

問題的第二部分**我想在兩個div中顯示值2如何實現這一點**尚不清楚。 – sahil

回答

0
  1. 呼叫functionbutton

    <input id="trigger" type="button" value="Result!" onclick="secondPlay();" />

  2. 你的函數secondPlay(),加secondPlay1打電話。