0

我有一个显示/隐藏 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...
}
4

3 回答 3

3

有点离题，但如果您使用的是 jquery 库，这会更容易。

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

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

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

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

于 2012-06-27T15:24:56.967 回答
3

首先，您的 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 元素都将被强制到下一行，除非另有明确设计。您应该做的只是删除隐藏类。

于 2012-06-27T15:28:27.487 回答
0

检查类名的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 框架/库。但是，如果切换元素的显示只是您要做的事情，那么我认为它们是矫枉过正的。

于 2012-06-27T15:17:46.800 回答