Страница, с которой я работаю, находится здесь:
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), но ничего не происходит. Кроме того, если вы проверите HTML-код для «шага 4», вы увидите, что вместо изображений я запускаю простой скрипт document.write:
<h3>
<script type="text/javascript">
document.write(answer1);
</script>
</h3>
пока, опять же, ничего не отображается. Почему мои переменные не сохраняются в течение всего опроса jquery?
Извините за массивный код, приведенный ниже, но он может помочь решить проблему - весь код .js, который выполняет шаги опроса jquery, а также функции наведения / щелчка на каждой карте.
(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);