如何使用jQuery在点击按钮时触发函数
How to trigger a function on a button click using 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，我想调用函数secondPlay和secondPlay1。
我如何在点击按钮时播放此功能
当
setInterval(function() {
if (i < 15) {
secondPlay();
i++;
}}, 1000);
函数完成了15次迭代，我想在两个divs中显示值2我如何实现这个
-
用于调用
button中的function<input id="trigger" type="button" value="Result!" onclick="secondPlay();" /> -
在函数
secondPlay()中，添加secondPlay1进行调用。
相关文章：
- 创建一个类似链接的按钮，并通过Javascript函数打开一个新的弹出窗口
- JavaScript按钮/输入/函数，字符串反转
- 代码背后调用一个JavaScript函数的按钮点击-C#
- 在按钮上调用Javascript函数
- 如果函数返回True，则显示Javascript按钮
- HTML 按钮点击函数无法使用 jQuery 变量作为参数
- 提交按钮通过JQuery和JavaScript函数所做的更改不会持续
- JavaScript-onClick将按钮ID或单击按钮的文本传递给函数
- 如何从reactjs中的按钮向函数传递props
- 如何在javascript中添加带有回调函数的按钮点击事件作为window.conf
- 获取javascript函数中的按钮名称
- 使用函数按钮调用 ajaxform
- if语句禁用了我的jquery函数/按钮
- 如何防止默认操作函数按钮(F4，F5等）在Angular js中
- 定义函数按钮javascript
- Javascript函数按钮
- 在另一个页面上进行javascript函数/按钮点击事件调用
- 当我点击“提交”时，如何调用Javascript函数?按钮
- 在asp上使用Ajax Javascript调用c#函数:按钮点击，不工作
- 调用一个php函数按钮点击jquery - Astra Api
