Jquery 错误 - 未捕获的错误：语法错误，无法识别的表达式

Question

我正在 Wordpress 中创建一个网站，并且在自定义帖子类型中创建了一个输入界面略有不同的网站，我认为这是合乎逻辑的：

• 列出类别（分类法）；
• 列出此类别的帖子（频道）；
• 如果你点击一个帖子，这个帖子会被添加到一个文本字段中，如果再次点击，它会被删除；

代码在一段时间内运行良好，但神奇地停止了：

load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3 未捕获的错误：语法错误，无法识别的表达式：div# div.channel 在 Function.fa.error (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) 在 fa.tokenize (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) 在 fa.select (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) 在 Function.fa (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) 在 Function.a.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) 在 n.fn.init.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) 在 n.fn.init.a.fn.find (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) 在 a.fn.init.n.fn.init (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3) 在新的 a.fn.init (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:10) 在 n (load-scripts.php?c=0&load[]=utils,jquery-core,jquery-migrate,moxiejs,plupload&ver=4.9.8:3)

我的代码：

        <script>
        // Carrega as categorias de canais
        jQuery.get(
            'http://meusite.com/wordpress/wp-json/wp/v2/canais-categorias?per_page=100&orderby=name&order=asc',
            function(data){
                for(var i=0; i < data.length; i++){
                    jQuery('div#channels').append(
                        '<div class="row">'                                                                                     +
                            '<div class="col-12">'                                                                          +
                                '<h3>' + data[i].name + '</h3>'                                                     +
                            '</div>'                                                                                                        +
                        '</div>'                                                                                                            +
                        '<div class="row channel-grid" id="' +  data[i].slug + '">'     +
                        '</div>'
                    );
                }
            }, 'json'
        );

        // Carrega os canais
        jQuery.get(
            'http://meusite.com/wordpress/wp-json/wp/v2/canais?per_page=100&orderby=title&order=asc',
            function(data){
                for(var i=0; i<data.length; i++){
                    jQuery('div#' + data[i].categoria[0]).append(
                        '<div class="col-3" id="' + data[i].slug + '">'         +
                            '<div class="channel">'                                                     +
                                '<img src="' + data[i].channel_image + '">'         +
                                '<p>' + data[i].title.rendered + '</p>'                 +
                            '</div>'                                                                                    +
                        '</div>'
                    );
                }

                // Seleciona os caais ativos
                var channel_grid = jQuery('input#plan_channels_grid').val();
                var channel_grid = channel_grid.substring(0, channel_grid.length-1);
                var channel_grid = channel_grid.split(',');

                for(var i=0; i<channel_grid.length; i++){
                    jQuery('div#' + channel_grid[i] + ' div.channel').addClass('active');
                }

                // Adiciona e remove um canal com um clique
                jQuery('div.channel').click(function(){
                    var id = jQuery(this).parent().attr('id');

                    if(jQuery('div#' + id + ' div.channel').hasClass('active')){
                        jQuery('div#' + id + ' div.channel').removeClass('active');

                        var ch = jQuery('input#plan_channels_grid').val();
                        jQuery('input#plan_channels_grid').val(ch.replace((id + ','), ''));
                    }else{
                        jQuery('div#' + id + ' div.channel').addClass('active');

                        var ch = jQuery('input#plan_channels_grid').val();
                        jQuery('input#plan_channels_grid').val(ch + id + ',');
                    }
                });
            }, 'json'
        );
    </script>

有什么想法吗？

Answer 1

div# div.channel 是一个无效的 CSS 选择器。 # 后面有一个空格，这会使 ID 选择器无效。因此，您的字符串连接之一是将字符串与前导空格连接起来，或者您正在连接一个空变量。

例如：

jQuery('div#' + id + ' div.channel')

如果id 是一个空字符串，您将获得错误提及的字符串。与：

jQuery('div#' + channel_grid[i] + ' div.channel')

如果channel_grid[i] 为空，它将生成一个无效的css 选择器。回顾您的代码并确保您的代码设置正确以生成这些变量并且不生成空字符串。或者在尝试使用它们之前使用错误检查。