If you want to see the complete codepen, I will share it here: http://codepen.io/JTBennett/pen/NdLWJy
Let me try to simplify the problem. I have a click event that selects from a JSON object based on one of its string values. Text from various strings is placed inside divs, but I want some hidden divs to fade in if a specific value is found within a group of strings in the JSON object (I used identical class names to make it easier).
Here's an illustration of one of the JSON objects:
{
"CSS":"A_Aeolian",
"root":"A",
"scale":"Aeolian",
"name":"A Aeolian",
"type":"Scale",
"structure":"A B C D E F G",
"noteClass_1":"A",
"noteClass_2":"B",
"noteClass_3":"C",
"noteClass_4":"D",
"noteClass_5":"E",
"noteClass_6":"F",
"noteClass_7":"G",
"noteClass_8":""
}
And this is my jQuery code:
$('.A, .As, .B, .C, .Cs, .D, .Ds, .E, .F, .Fs, .G, .Gs').hide();
$.getJSON("https://api.myjson.com/bins/non2t.json", function(data) {
$('.main-btn').on("click", function () {
$('#total-scale-men').empty()
console.log("emptied total-scale-men");
$('.gcMen ul li button').css({'border' : '1px #666 solid',
'color' : '#666'})
$('.scales-men').hide()
$('.scales-men').fadeIn()
$(this).css({'border' : '1px #cc4c4c solid',
'color' : '#cc4c4c'})
var scale = $(this).data('scale')
$.each(data,function(i,data){
if (scale == data.root) {
$('#total-scale-men').append('<button class="scale-btn" data-css="'+ data.CSS +'">' + data.scale + '</button>');
}
});
$('.scale-btn').on("click", function () {
$('.nt').hide()
$('.scales-men').hide()
$('.gcMen ul li button').css({'border' : '1px #666 solid','color' : '#666'})
var css = $(this).data('css')
$.each(data,function(i,data){
var notes = [data.noteClass_1,
data.noteClass_2,
data.noteClass_3,
data.noteClass_4,
data.noteClass_5,
data.noteClass_6,
data.noteClass_7,
data.noteClass_8]
var ntClass = ['.A','.As','.B','.C','.Cs','.D','.Ds','.E','.F','.Fs','.G','.Gs']
if (css == data.CSS) {
$('#inf div:nth-child(1)').text(data.root)
$('#inf div:nth-child(2)').text(data.scale)
$('#inf div:nth-child(3)').text(data.structure)
if (notes[0] == 'A') {
$(ntClass[0]).fadeIn()
}
}
});
})
})
});
You can observe that I stored the noteClass string values and div class values in arrays - now, how do I compare all values in the two arrays (notes & ntClass) and fade in the corresponding class when there's a match? That's the question at hand.
If my explanation wasn't clear enough, please check out the codepen for better clarity (http://codepen.io/JTBennett/pen/NdLWJy)
Any assistance provided would be greatly appreciated!