Question

大家好我已经在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后，我想调用函数secondPlay和secondPlay1。

如何在按钮上单击

播放此功能

以及何时

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

函数完成15次迭代，我想在2中显示值divs如何实现此目的

Answer 1

在function
中呼叫button
<input id="trigger" type="button" value="Result!" onclick="secondPlay();" />
在您的功能secondPlay()上，添加secondPlay1进行通话。

如何使用jQuery触发单击按钮上的功能

1 个答案: