Question

我已经在wordpress后端创建了一个自定义管理页面，并且具有这个基本的html结构，

<ul data-status="available">
    <li class="available">AVAILABLE</li>
    <li class="onleave">ONLEAVE</li>
</ul>

当我在下面使用js代码时，它可以正常工作

$('ul').each( function() {
    var status = 'available';
    $(this).find('li.' + status ).addClass('active');
});

虽然下面的代码也有效（它在元素上添加了类）但是它会产生错误

$('ul').each( function() {
    var status = $(this).data('status');
    $(this).find('li.' + status ).addClass('active');
});

控制台错误

Syntax error, unrecognized expression: li. load-scripts.php?c=0&load[]=jquery-core,jquery-migrate,utils&ver=4.4.1:2

(9 Errors) Cannot read property 'hasClass' of undefined load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,svg-painter,heartbeat,wp-auth-check,thickb…:246

任何明确的解释都将受到高度赞赏

完整JS代码

( function($) {
    'use strict';
    $(document).ready( function() {

        $('ul').each( function() {
            var status = $(this).attr('name');
            //$(this).find('li.' + status ).addClass('active');
        });      
        $('form').on('click', 'li', function() {
            var currentStatus = $(this).parent().attr('name');
            var id = $(this).parent().attr('id');
            var status = $(this).attr('name');
            var input = '<input id="model-'+id+'" type="hidden" name="'+id+'" value="'+status+'" />'
            if( currentStatus !== status || !currentStatus ) {
                $('form').prepend( input );
            } else {
                $('form').find('#model-'+id).remove();
            } 
            $(this).parent().find('li').removeClass('active');
            $(this).addClass('active');
        });
        $('form').submit( function(e) { 
            e.preventDefault();
            console.log( $( this ).serialize() );
        });
    });
})(jQuery);

Answer 1

快速（虽然不是很好的解决方案）是检查状态的值/类型，如果未定义则跳出.each()循环：

$('ul').each( function() {
    var status = $(this).attr('name');
    if (typeof status === "undefined" || !status) {
        return false;
    };
    $(this).find('li.' + status ).addClass('active');
});

正如我所提到的，遍历页面上某个类型的所有元素通常是一个坏主意。最好循环使用给定类的一组元素。

Answer 2

试试这个：

$('ul').each( function() {
    var status = $(this).attr('data-status'); //note: data-status, not status
    $(this).find('li.' + status ).addClass('active');
});

.data（）方法用于设置/获取在Dom中未在视觉上表示的对象级数据。但是，您正在使用属性，它在jQuery（.attr（））中具有不同的访问器。

见这里： https://api.jquery.com/data/ 和这里 http://api.jquery.com/attr/

Wordpress后端Javascript错误

2 个答案: