jQuery: Show/Hide based on Radio Boxes from an array
I setup two arrays: 1) the class names and the value names 2) the HTML fields that are being effected: such as li, divs etc...
Basically I setup everything to use classes instead of ID's because the # is a coldfusion veriable/function marker which throws up a CFML error. I put everything into arrays to recude the number of $.change(functions) I had to write.
First issue开发者_如何学Python: only 2 fields are getting hidden. Second issue: when you click on a radio box, nothing shows up.
Any suggestions?
Code:
<!--- An array of the radio boxes |
It's a collection of the class="" of the radio boxes
and their values. We're going to loop over this to
show/hide fields for the array below.
--->
var classArray = new Array(
"appliedWorkedYes",
"workStudyYes",
"workHistoryYes",
"workWeekEndsYes",
"cprYes",
"aedYes",
"aidYes"
);
<!--- An array of the radio boxes extra fields, these will be hidden
It's a collection of HTML elements such as span or li that have the
class name of each in the array. the idea is on load they will be hidden
when you select yes on a radio box they will appear with their extra details.
--->
var classFieldArray = new Array(
"appliedWorkedYesHide",
"workStudyYesHide",
"workHistoryYesHide",
"workWeekEndsYesHide",
"cprYesHide",
"aedYesHide",
"aidYesHide"
)
$(document).ready(function() {
// looping over the class name
for(var i = 0; i < classArray.length; i++){
var fName = classFieldArray[i];
var cName = classArray[i];
// hiding the fields until selected
$("."+fName).css("display","none");
// the jQuery fu that shows the fields
$("radio[@name=''+cName]").change(function(){
if ($("radio[@name=''+cName]:checked").val() == ''+cName)
$('.'+fName).show("fast");
});
}
});
It doesn't look like you are concatinating the cName correctly. Also @ in front of attributes is no longer used. ie:
$("radio[@name=''+cName]")
should be
$("radio[name='"+cName+"']")
精彩评论