多次使用onclick函数
Using an onclick function multiple times
想象一下,您正在使用一个映像来调用这样的函数:
<img src="images/next.png" alt="" class="transition opacity" onclick="nextQ()" />
你有一个功能:
function nextQ(id) {
var prevQuestion = 0;
var currentQuestion = 1;
prevQuestion++;
currentQuestion++;
var elem = document.getElementById("q" + prevQuestion);
elem.parentNode.removeChild(elem);
document.getElementById("q" + currentQuestion).style.cssText = 'display:inline;';
next.style.cssText = 'display:none;';}
我怎么能做到每次你点击图像时都会发生功能。目前,只有当你第一次点击它时,它才会发生,而当你第二次点击时,什么都不会发生。
您的上一个问题&;您的currentQuestion每次运行该函数时都会重置,如果您希望它们每次递增,请将它们设置为全局变量(将它们放在函数之外(,如下所示:
var prevQuestion = 0;
var currentQuestion = 1;
function nextQ(id) {
prevQuestion++;
currentQuestion++;
}
这是一个工作示例http://jsfiddle.net/Tt8f6/
onclick="nextQ()"
仅供参考,在标记中使用事件处理程序是不好的做法。请参阅本SO主题。
除了格式化和缩进之外,问题是每次执行函数时,用于保存状态的变量都会丢失并重新创建。你需要将它们转移到更高的范围并在那里进行管理:
var nextQ = (function() {
var prevQuestion = 0;
var currentQuestion = 1;
function nextQ() { // You never referenced the id argument.
prevQuestion++;
currentQuestion++;
var elem = document.getElementById("q" + prevQuestion);
elem.parentNode.removeChild(elem);
document.getElementById("q" + currentQuestion).style.cssText = 'display:inline;';
next.style.cssText = 'display:none;'; // This is not defined!
}
return nextQ;
})();
最后,上面的代码没有提供必须的操作或检查方式。虽然是功能性的和正确的(最简单的(答案,但我将更进一步,真正抽象的东西:
function QuestionStateMachine(id_prefix) {
this.id_prefix = id_prefix;
this.currentQuestion = 1;
}
QuestionStateMachine.prototype.nextQ = function() {
var current = this.currentQuestion++;
var previous = current - 1;
var next = current + 1;
var prevEl = document.getElementById('' + this.id_prefix + previous);
var currentEl = document.getElementById('' + this.id_prefix + current)
var nextEl = document.getElementById('' + this.id_prefix + next)
prevEl.parentNode.removeChild(prevEl);
currentEl.style.cssText = 'display:inline;';
nextEl.style.cssText = 'display:none;';
};
var quizSM = new QuestionStateMachine('q');
document.getElementsByClassName('quiz-button').forEach(function(button) {
button.addEventListener('click', quizSM.nextQ.bind(quizSM));
});
相关文章:
- onclick函数需要双击,因为类分配延迟
- Javascript onclick函数会立即调用(而不是在单击时调用)
- jquery Onclick函数带有导致双击的回调排序函数
- 使用element简化onclick函数
- 在React中,为什么我必须绑定onClick函数而不是调用它
- 如何从onclick函数设置全局变量并将其传递给另一个JS文件
- 在onclick函数中传递多个参数
- 如何将onclick函数更改为具有多个函数
- 将OnClick函数设置为<ul>,最后一个ul是擦除第一个ul-s
- 指定一个具有静态值的onclick函数
- Onclick函数更改为所有更改元素的相同函数
- 将php变量传递给onclick函数
- 请帮我完成js中按钮的onclick函数
- .hasClass 在 onclick 函数中不起作用,但删除和添加类函数可以
- Jquery移动转换复选框在Jquery onclick函数()中第二次选中不起作用
- 使用“;这个“;在onclick函数中
- 如何在按Enter键后调用onclick函数
- jQuery onclick 函数:未定义不是一个函数
- 如何在 OnClick 函数中传递字符串参数
- OnClick函数仅在第二次单击时起作用