我正在使用的页面在这里：
http://harrisonfjord.com/survey/index.html
当您在每个步骤中单击某个对象时，您单击的图像映射区域的“alt”标记将保存为变量答案（当前问题编号）。
代码在这里（忽略评论，我只是把它们放进去，所以我知道我到底在做什么！）：
$(window).load(function(){
//#shape functions
$('#shape area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
} //.hover allows 2 function - first is mouse on, second is mouse off
); //End #shape .hover function
$('#shape area').click( //.click only allows 1 function.
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer1 = $(this).attr("alt");
alert(answer1);
}
);//End #Shape .click function
//#height functions
$('#height area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #height .hover function
$('#height area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer2 = $(this).attr("alt");
alert(answer2 + answer1);
}
);//End #height .click function
//#world functions
$('#world area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #world .hover function
$('#world area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer3 = $(this).attr("alt");
alert(answer3);
}
);//End #world .click function
}); //End (window) onLoad function
正如您所看到的，我正在为每个变量创建一个警报，这样我就可以看到它在点击时有效。然而，在我按下“下一步”之后，变量似乎就会消除。正如你所看到的，在第二步中，我正在警告（answer1 + answer2），但没有任何结果。此外，如果您检查“步骤4”的html代码，您将看到我正在运行一个简单的document.write脚本而不是图像：
<h3>
<script type="text/javascript">
document.write(answer1);
</script>
</h3>
然而，再一次，没有任何显示。为什么我的变量不能通过整个jquery调查持续存在？
请原谅下面的大量代码，但它可能有助于解决问题 - 运行jquery调查步骤的整个.js代码，以及每个地图的悬停/点击功能。
(function($){
$(window).load(function(){
//#shape functions
$('#shape area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
} //.hover allows 2 function - first is mouse on, second is mouse off
); //End #shape .hover function
$('#shape area').click( //.click only allows 1 function.
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer1 = $(this).attr("alt");
alert(answer1);
}
);//End #Shape .click function
//#height functions
$('#height area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #height .hover function
$('#height area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer2 = $(this).attr("alt");
alert(answer2 + answer1);
}
);//End #height .click function
//#world functions
$('#world area').hover(
function(e){
$('#'+ this.alt).addClass('hover');
},
function(e){
$('#'+ this.alt).removeClass('hover');
}
); //End #world .hover function
$('#world area').click(
function(e){
$('img.selected-region').removeClass('selected-region');
$('#'+ this.alt).addClass('selected-region');
var answer3 = $(this).attr("alt");
alert(answer3);
}
);//End #world .click function
// jQuery.extend merges contents of two or
// more objects together into the first object
//$.extend(useranswers,{
//answer1 : $("img.selected-region").attr('rel')
//});
//$.cookie('survery',
//JSON.stringify(useranswers),
//{ expires: 7, path: '/', domain: '<your_domain_name>' }
//);
}); //End (window) onLoad function
$.fn.smartWizard = function(options) {
var defaults = {
selectedStep: 0, // Selected Step, 0 = first step
errorSteps:[], // Array Steps with errors
enableAll:false, // Enable All Steps, true/false
animation:true, // Animation Effect on navigation, true/false
validatorFunc:function(){return true;} // Step validation function, Step index will be passed
};
var options = $.extend(defaults, options);
return this.each(function() {
obj = $(this);
var wizcurrent = 0;
var steps = $("ul > li > a", obj);
// Apply Default Style to Steps
applyCSS($(steps, obj),"wiz-anc-default");
// Hide All Steps on load
hideAllSteps();
$(steps, obj).bind("click", function(e){
e.preventDefault();
var isDone = $(this, obj).attr("isDone");
if(isDone == 1){
var selIdx = steps.index(this);
applyCSS($(wizcurrent, obj),"wiz-anc-done");
selectStep(selIdx);
}
});
// activates steps up to the selected step
for(i=0;i<steps.length;i++){
if(i<=options.selectedStep || options.enableAll==true){
activateStep(i);
}
}
// highlight steps with errors
$.each(options.errorSteps, function(i, n){
//applyCSS(steps.eq(n),"wiz-anc-error");
setErrorStep(n)
});
selectStep(options.selectedStep);
//Next Navigation
$(".next", obj).bind("click", function(e){
e.preventDefault();
var curStepIdx = $(steps, obj).index(wizcurrent);
if(options.validatorFunc(curStepIdx)){
var nextStepIdx = curStepIdx+1;
applyCSS($(wizcurrent, obj),"wiz-anc-done");
selectStep(nextStepIdx);
}
});
//Back Navigation
$(".back", obj).bind("click", function(e){
e.preventDefault();
applyCSS($(wizcurrent, obj),"wiz-anc-done");
var prevIdx = $(steps, obj).index(wizcurrent)-1;
selectStep(prevIdx);
});
function selectStep(idx){
if(idx < steps.length && idx >= 0){
var selStepAnchor = $(steps, obj).eq(idx);
var selStepIdx =selStepAnchor.attr("href");
hideAllSteps();
selStepAnchor.attr("isDone","1");
if(options.animation==true){
$(selStepIdx, obj).fadeIn("fast");
}else{
$(selStepIdx, obj).show();
}
applyCSS($(selStepAnchor, obj),"wiz-anc-current");
wizcurrent = selStepAnchor;
}
}
function activateStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isDone","1");
applyCSS($(selStepAnchor, obj),"wiz-anc-done");
}
function setErrorStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isError","1");
$(selStepAnchor, obj).addClass("wiz-anc-error");
}
function unsetErrorStep(idx){
var selStepAnchor = steps.eq(idx);
selStepAnchor.attr("isError","");
$(selStepAnchor, obj).removeClass("wiz-anc-error");
}
function hideAllSteps(){
$(steps, obj).each(function(){
$($(this, obj).attr("href"), obj).hide();
});
}
function applyCSS(elm,css){
$(elm, obj).removeClass("wiz-anc-default");
$(elm, obj).removeClass("wiz-anc-current");
$(elm, obj).removeClass("wiz-anc-done");
$(elm, obj).addClass(css);
}
});
};
})(jQuery);
答案 0 :(得分：1)
初始化answer1并在脚本开头的任何函数之外回答2个变量。这样，函数将使用全局变量而不是本地变量。
基本上，如果在函数内部创建一个新变量，它将仅在该特定函数（本地）内可用。如果它在函数外部之前创建，则使用该变量（全局）。谷歌在“JavaScript本地和全局变量”上有关此主题的更多信息。
var answer1, answer;
简而言之，将其放在脚本的开头，并将更多引用更改为：
answer = .... // hence, no var before the variable name
希望有所帮助！
答案 1 :(得分：1)
由于您在函数中定义变量“var answer1”，因此它们仅在此函数的范围内定义。试试这个：
$(window).load(function(){
var answer1, answer2, answer3;
//#shape functions
$('#shape area').hover(
...
然后松开点击事件功能中的“var”。