使用jQuery添加/删除css类，通过css类识别元素

Add/Remove css class using jQuery to identify elements by a css class

本文关键字：css 通过 识别 元素 jQuery 删除 使用 添加      更新时间：2023-09-26

我在下面有一个javascript/jQuery函数:

    function hideShowHiddens(action){
        $('.hidden_col').each(function(){
            if(action == 'show'){
                this.removeClass("hidden");
            }else{
                this.addClass("hidden");
            }
        });
    }

它应该做的是用空标记css '.hidden_col'搜索jsp中的每个元素。然后根据输入的参数，它将添加或删除另一个名为'的css类。"隐藏"实际上隐藏了元素。

这个方法将理想地为我节省400行javascript函数，这对于我需要处理的数据量来说太慢了。然而，当它运行时，我从浏览器得到一个错误，说它不支持这个方法。谁能告诉我为什么这个不工作或如何解决它?

.addClass()和.removeClass()为jQuery函数。jQuery对象是标准DOM对象的超集。您需要包装DOM对象以创建jQuery对象。然后函数就可以访问了。

function hideShowHiddens(action){
    $('.hidden_col').each(function(){
        if(action == 'show'){
            $(this).removeClass("hidden");
        }else{
            $(this).addClass("hidden");
        }
    });
}

例子: JSFiddle

选择:

这里有一个更短、更甜的替代品。

function hideShowHiddens(action){
    (action === "show") ? $('.hidden_col').show() : $('.hidden_col').hide();
}

您缺少$ selector，请尝试此$(this).removeClass("hidden")和$(this).addClass("hidden");

具体的问题是this是一个DOM元素，而不是一个jQuery对象。您可以将代码简化为省略.each循环:

function hideShowHiddens(action){
    $('.hidden_col').toggleClass('hidden', action !== 'show');
}

参考:https://api.jquery.com/toggleClass/toggleClass-className-switch

相关文章：