jQuery to Wordpress - 未经捕捉的错误让我疯狂

时间:2017-02-26 01:10:42

标签: javascript jquery css json wordpress

我最近在Codepen上完成了一个小应用程序,我决定将它带到我的网站,该网站正在使用Wordpress。我用jQuery替换了$的所有实例并更新了我的JSON文件的位置,但是我在控制台中遇到了一些问题。

程序运行正常 - 它到达JSON文件并从中提取信息 - 直到我点击一个缩放按钮它就停止了。第一次,控制台中没有任何内容,但第二次死锁将带来这一点:

Uncaught Error: Syntax error, unrecognized expression: .
    at Function.ga.error (jquery.js?ver=1.12.4:2)
    at ga.tokenize (jquery.js?ver=1.12.4:2)
    at ga.select (jquery.js?ver=1.12.4:2)
    at Function.ga (jquery.js?ver=1.12.4:2)
    at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
    at r.fn.init.find (jquery.js?ver=1.12.4:2)
    at r.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
    at a.fn.init.r.fn.init (jquery.js?ver=1.12.4:2)
    at a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
    at r (jquery.js?ver=1.12.4:2)

我对此感到头疼,我之前已将jQuery应用程序放在此站点上并遇到问题,但我最终能够让其他人进入...这次是不同的。

我真的很感激,如果有人可以看看他们是否能发现问题,我现在对此感到非常沮丧。

这是原始的(正常运行的)codepen:http://codepen.io/JTBennett/pen/NdLWJy 这是转移的wordpress版本:https://www.electricherald.com/guitar-scales-chart-application/

这里是新的jQuery(用于比较):

jQuery('.A, .As, .B, .C, .Cs, .D, .Ds, .E, .F, .Fs, .G, .Gs').hide();

jQuery.getJSON("https://www.electricherald.com/json/scalesDirSm.json", function(data) {
    console.log(data);
  jQuery('.main-btn').on("click", function () {
    jQuery('#total-scale-men').empty()
    console.log("emptied total-scale-men");
    jQuery('.gcMen ul li button').css({'border' : '1px #666 solid',
   'color' : '#666'})
    jQuery('.scales-men').hide()
    jQuery('.scales-men').fadeIn()
    jQuery(this).css({'border' : '1px #cc4c4c solid',
   'color' : '#cc4c4c'})
        var scale = jQuery(this).data('scale')
        jQuery.each(data,function(i,data){
            if (scale == data.root) {
                jQuery('#total-scale-men').append('<button class="scale-btn" data-css="'+ data.CSS +'">' + data.scale + '</button>');
            }
        });

        jQuery('.scale-btn').on("click", function () {
    jQuery('.nt').hide()
    jQuery('.scales-men').hide()
    jQuery('.gcMen ul li button').css({'border' : '1px #666 solid','color' : '#666'})

      var css = jQuery(this).data('css')
      jQuery.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]
      if (css == data.CSS) {
      jQuery('#test').html(notes)
        jQuery('#inf div:nth-child(1)').text(data.root)
        jQuery('#inf div:nth-child(2)').text(data.scale)
        jQuery('#inf div:nth-child(3)').text(data.structure)

        for(var i = 0; i < notes.length; i++)
        jQuery(notes[i]).fadeIn();
      }
      });
  })

    })
}); 

我非常欣赏这个方向的一些方向,我现在对wordpress非常生气。我希望我此时自己建立网站。

1 个答案:

答案 0 :(得分:3)

我能够通过切换到您在生产网站上使用的jquery版本来重现codepen上的错误enter image description here

因此,在您的网站上,您应该升级到jquery 3.x