Jquery PageWalkthrough在同一页面上的多个演练
Jquery PageWalkthrough在同一页面上的多个演练
提问于 2014-09-23 19:20:18
我正在做一个交互式培训课程，由于培训课程涵盖的主题很多，我试图打破单调，并插入一些“演练”来帮助解释概念。我的问题是如何在同一页上插入多个漫游，并让它们在单击特定按钮时触发正确的漫游。
我正在使用这个插件：https://github.com/jwarby/jquery-pagewalkthrough。虽然我可以让每个演练彼此独立地工作，但如果我以任何方式在同一页上组合代码，第二个演练将不可避免地永远不会触发。
以下代码块当前驻留在文件main.js中。这是第一个演练的代码：
$('#division').on('click', function(e){
$('#division').pagewalkthrough('show');
$('#division').pagewalkthrough({
name: 'division',
steps: [{
wrapper: '#slide12 ftop',
popup: {
content: '#dividewalkthrough-1',
type: 'modal'
}
}],
onLoad: true
});
});第二步演练：
$('#multiply').on('click', function(e){
$('#multiply').pagewalkthrough('show');
$('#multiply').pagewalkthrough({
name: 'multiply',
steps: [{
wrapper: '#slide10 .ftop',
popup: {
content: '#walkthrough-1',
type: 'tooltip',
position: 'bottom'
}
}, {
wrapper: '#slide10 .fsol',
popup: {
content: '#walkthrough-2',
type: 'tooltip',
position: 'bottom',
},
onEnter: function(){
$('#slide10 .fsol').show();
return true;
},
onLeave: function(){
var bcol3 = $('#slide10 .fsol .bcol3').val(),
bcol4 = $('#slide10 .fsol .bcol4').val(),
bcol5 = $('#slide10 .fsol .bcol5').val(),
bcol6 = $('#slide10 .fsol .bcol6').val();
if(bcol3 != "" && bcol4 != "" && bcol5 != "" && bcol6 != ""){
return true;
}else{
alert('You must fill in each column');
return false;
}
}
}, {
wrapper: '#slide10 .ssol',
popup: {
content: '#walkthrough-3',
type: 'tooltip',
position: 'bottom'
},
onEnter: function(){
$('#slide10 .ssol').show();
return true;
},
onLeave: function(){
var bcol3 = $('#slide10 .ssol .bcol3').val(),
bcol4 = $('#slide10 .ssol .bcol4').val(),
bcol5 = $('#slide10 .ssol .bcol5').val();
if(bcol3 != "" && bcol4 != "" && bcol5 != ""){
return true;
}else{
alert('You must fill in each column');
return false;
}
}
}],
onLoad: true
});
});我已经尝试过完全分离代码，并将代码块放在不同的.js文件中。我尝试从页面调用单击函数，而不是在.js文件中调用。我最接近正确触发的是当‘除法’的按钮被按下时(它是层次结构中的第二个按钮)，‘乘法’演练显示，但是如果我在关闭‘乘法’演练之后再次按下‘除法’按钮，那么‘除法’演练就会正确显示。
有什么想法吗？
回答 1
Stack Overflow用户
发布于 2014-09-23 20:23:36
在进行了更多的阅读和研究后，我发现了这个注释：https://github.com/jwarby/jquery-pagewalkthrough#showname。
通过更改我称为演练的方式，它们现在可以正确显示。我现在把演练称为这样：
$('#multiply').on('click', function(){
$.pagewalkthrough('show', 'multiply');
});而不是用旧的方式：
$('#division').on('click', function(e){
$('#division').pagewalkthrough('show');
});希望这对以后的其他人有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25993772
复制相关文章
相似问题
腾讯云开发者
