Question

我有一个div，根据用户请求，我想要隐藏一些元素。这些元素具有特定的背景颜色。该函数的调用正在工作（它与一个复选框相关联）但它只是没有做我想要的。实际上，它什么也没做。这就是我所拥有的：

function toogleDisplay()
{
    var kiddos= document.getElementById('external-events').childNodes; //my div 
    for(i=0; i < kiddos.length; i++)
    {       
        var a=kiddos[i];
        if (a.style.backgroundColor=="#A2B5CD")
            {
            if (a.style.display!="none")        

            {
                a.style.display='none';
            }               
             else
             {
                a.style.display='block';
             }
         }

    }
}

我做错了什么？

Answer 1

元素的背景颜色在内部转换为rgb()（或rgba()）格式。

但是，除此之外，假设$是jQuery（你还没有标记你的问题，所以我不知道！）那么a是一个jQuery对象，它没有一个style财产。看起来你只是想要var a = kiddos[i];。

使用特定的类名称更可靠。

Answer 2

您将kiddos[i]重新包装在jquery-object $(kiddos[i])中，然后尝试访问html-dom-objekt的常规属性。你有两种可能性：

删除$()

使用对属性的jquery-access

a.css('display', none); // or just a.hide();

此外，您无法检查＆＃39;＃123456＆＃39;因为颜色被改变了。检查（@Niet the Dark Absol）这个答案

Answer 3

我建议在要检查的元素中添加一个类。然后，您可以执行

而不是尝试使用背景

$(kiddos[i]).hasClass('myclass')

或者以非常有效的方式，您可以在一行代码中完成。

function toogleDisplay()
{
    $('.myclass').toggle(); //this will toggle hide/show
}

div看起来像这样

<div class='myclass'>Content</div>

编辑 - 无需修改现有的HTML即可完成。如果我没有弄错的话，我也认为rbg颜色应该是rgb（162,181,205）。你可以尝试这样的事情。它基于以下链接 Selecting elements with a certain background color

function toogleDisplay()
{
$('div#external-events').filter(function() {
    var match = 'rgb(162, 181, 205)'; // should be your color
    return ( $(this).css('background-color') == match );
}).toggle()
}

Answer 4

您的jquery选择a会导致问题。从中解开$（）你应该没事。

此外，您最终可能会选择没有样式属性的文本节点。在尝试访问后台，显示等之前，您应该检查节点上是否存在样式属性

使用类而不是背景并检查它。

Answer 5

我认为您需要查看'nodeType'是否为元素'a.nodeType == 1'，请参阅Node.nodeType然后它将在多行上工作

var kiddos= document.getElementById('external-events').childNodes; //my div 
for(i=0; i < kiddos.length; i++)
{   
var a=kiddos[i];
 if (a.nodeType == 1){   // Check the node type

    if (a.style.backgroundColor=="red")
        {
        if (a.style.display!="none")        

        {
            a.style.display='none';
        }               
         else
         {
            a.style.display='block';
         }
     }

}
}

Answer 6

我决定采用另一种方式，使用Kalel Wade的想法。隐藏的所有元素都已经有了一个类名，幸运的是，它们对所有元素都是相同的。

这里是代码

function toogleDisplay()
{

    var kiddos = document.getElementsByClassName("external-event ui-draggable");
    for (var i = 0, len = kiddos.length; i < len; i++) {
        var a=kiddos[i];
        if (a.style.backgroundColor==="rgb(162, 181, 205)")
            {
            if (a.style.display!="none")        
                {
                    a.style.display='none';
                }               
             else
                 {
                    a.style.display='block';
                 }
            }
    }

}

如何迭代div的子元素并隐藏它们？

6 个答案: