Javascript jQuery+JSON-如何根据相应的JSON字符串选择类?

Javascript jQuery+JSON-如何根据相应的JSON字符串选择类?,javascript,jquery,css,json,Javascript,Jquery,Css,Json,我将在这里发布代码笔,以防有人想在上下文中看到整个事件: 现在我将尝试提炼出这个问题。我有一个click事件,它根据JSON对象的一个字符串值从JSON对象中进行选择。各种字符串作为文本引入div,但是如果JSON对象中的一组字符串包含一个特定的值,我会尝试使一些隐藏的div淡入。我通过在字符串值中使用相同的类名简化了这一过程 下面是一个JSON对象的示例: { "CSS":"A_Aeolian", "root":"A", "scale":"Aeolian", "name":"A Aeolian

我将在这里发布代码笔,以防有人想在上下文中看到整个事件:

现在我将尝试提炼出这个问题。我有一个click事件,它根据JSON对象的一个字符串值从JSON对象中进行选择。各种字符串作为文本引入div,但是如果JSON对象中的一组字符串包含一个特定的值,我会尝试使一些隐藏的div淡入。我通过在字符串值中使用相同的类名简化了这一过程

下面是一个JSON对象的示例:

{
"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":""
}
下面是我的jQuery:

$('.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()
        }
      }
      });
  })

    })
}); 
我怎样才能使这两个数组notes&ntClass的所有值都进行比较,然后每当出现匹配时,该类就会淡入

我希望我的意图足够清楚,如果不清楚的话,也许看看代码笔会有所帮助


任何帮助都将不胜感激

如果我误解了你的问题,请告诉我,但我认为你想这样做:

$("." + notes[0]).fadeIn();

因为你的笔记和你的课程之间的唯一区别是它们前面的类点,这应该是有效的。

这绝对是一种比我的更聪明的方法。但不幸的是,我仍然在尝试调整它,因为它似乎不起作用-我尝试了这个,但没有运气:forvar I=0;i$("." + notes[0]).fadeIn();