Question

我有一个show / hide div javascript函数

我希望将其转换为使用类名而不是样式

这是我想要转换它的函数

<script>
function toggle(e, id) {
    var el = document.getElementById(id);
    el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';
    toggle.el = el;
    if (e.stopPropagation) e.stopPropagation();
    e.cancelBubble = true;
    return false;
}
document.onclick = function() {
    if (toggle.el) {
        toggle.el.style.display = 'none';
    }
}
</script>

我希望将其转换为使用类名

例如：

#hidden{
display:none;
}
#shown{
display:block;
}
function toggle(e,id){
if(el.class=='hidden'){
el.setAttribute("class", "showen");
}
//etc...
}

Answer 1

首先，您的CSS无效，类在CSS中定义使用。并不是＃。＃的定义ID，对于文档中的一个元素始终是唯一的。另一方面，一个类，顾名思义，是一种可以是许多对象的东西。一个ID就像一只狗“Fido”的名字，你应该只有一只名为“Fido”的狗，而一个类就像一只狗品种，你可以有许多cockapoos，但每个都必须有一个独特的名字。这个问题的其他答案无法纠正你的CSS，如果你不纠正它，它将无法正常工作。

 .hidden{
   display:none;
 }
 .shown{
   display:block;
 }

其次，如果您使用JavaScript框架（例如JQuery），它将使您的生活更轻松。这是使用JQuery编写的相同内容（Jquery库包括省略）

$(document).click(function() {
    var toggleElements = $(".toggleMe");
    $.each(toggleElements, function (key, value) {
       if (value.hasClass('hidden')) {
           value.removeClass('hidden');
           value.addClass('shown');
       } else {
           if (value.hasClass('shown')) {
               value.removeClass('shown');
               value.addClass('hidden');
           }
       }
    });
});

我建议改进的另一件事就是不使用display：block来显示，因为display：block并不一定意味着简单地“显示”而不是“隐藏”，它意味着有关如何元素是根据显示来处理的，这意味着块元素被视为其全高/宽度，根据需要使用空格，除非另外明确设计，否则它旁边的什么和任何HTML元素都被强制到下一行。你应该做的只是删除隐藏的类。

Answer 2

有点偏离主题，但如果你正在使用jquery库，那就更容易了。

$(".yourclass").hide();
$(".yourclass").show();

使用jquery测试是否显示某些内容：

if ($(".yourclass").is(":visible"))

显然有些原因你可能不想使用jquery，但它有一些漂亮的工具可以让这样的事情变得更容易。

Answer 3

在className中检查现有的类名并不像人们想象的那么简单。以下文章对此有一个很好的解释，并包括自定义函数：hasClassName()

function hasClass(el, class_to_match) {
    if (el && el.className && typeof class_to_match === "string") {
        var c = el.getAttribute("class");
        c = " " + c + " ";
        return c.indexOf(" " + class_to_match + " ") > -1;
    }
    else {
        return false;
    }
}

然后您只需更新toggle功能：

function toggle(el, id) {
  if (hasClassName(el, 'hidden')) {
    el.setAttribute("class", "showen");
  }
}

注意：如果您经常这样做，我确实提倡使用这样的Javascript框架/库。但是，如果切换元素的显示只是你做的事情，那么我相信它们是过度的。

根据类名显示/隐藏div

3 个答案: