JavaScript 验证错误

Question

我终于弄清楚了是什么让我称之为“文件夹”的元素能够打开和关闭。问题是当我通过 validator 运行 HTML 文档时，它说属性 <isfolder="true"> div 不允许此时的元素。

<p></p>
<div class="folderOpenClose" onclick="toggleAllFolders();">Open/Close Folders</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder0&#39;);">Dice Roller</div>
<div id="folder0" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder1&#39;);">Slide Show</div>
<div id="folder1" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder2&#39;);">Carousel</div>
<div id="folder2" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>
<div class="folderlabel" onclick="togglefolder(&#39;folder3&#39;);">Menu Bar</div>
<div id="folder3" class="folder" isfolder="true" style="display: none;">
</div>
<p></p>

我删除它的问题是它操作“打开/关闭全部”，当我尝试将代码放入表单中时，“打开/关闭”文件夹不起作用。

    var lastChecked = null;            




function togglefolder(id){ 
    var ele = object(id);
    if(ele.style.display == 'none') ele.style.display='block';
    else ele.style.display = 'none';
}


function setAllFolders(how){
    var way = ""+how;
    if(way == "") way = "none";
    if(way == "closed") way = "none";
    if(way == "open") way = "block";

    var divs = window.document.getElementsByTagName('div');
    for(var i=0; i < divs.length; i++){

        if(divs[i].getAttribute('data-isfolder')&&divs[i].getAttribute('data-isfolder')=='true') 
            divs[i].style.display = way;

        var thisClass = ""+divs[i].getAttribute('class');

        if(thisClass=='folderlabel'){
            var thelabel = ""+divs[i].innerHTML;
            if(thelabel.indexOf('open/close all folders') != -1)
                divs[i].setAttribute('class','folderlabelopen');
        }
    }

    last_toggle=way;
}

Answer 1

<div id="folder2" class="folder" isfolder="true" style="display: none;"></div>

isfolder 不是已知的 HTML 属性，因此正在对其进行标记。

一种解决方案是使用 data-* 属性，例如:

<div id="folder2" class="folder" data-isfolder="true" style="display: none;"></div>

然后你的代码可以使用:

if(divs[i].getAttribute('data-isfolder') == 'true') 

还有一个漂亮的dataset API您可以使用。

More info on data-* properties.