Question

我有一系列同一类的div;一些设置了标题属性 - 有些没有：

<div class="component_wrapper cw1" title="thisTitle1">... </div>
<div class="component_wrapper cw2" title="thisTitle2">... </div>
<div class="component_wrapper cw3" title="thisTitle3">... </div>
<div class="component_wrapper cw4" title="">... </div>
<div class="component_wrapper cw5" title="">... </div>

我构建了一个循环遍历这些div的javascript函数，并通过将其css display属性设置为“inline”来显示具有title属性设置的那些：

function checkComponent(e){
    var hdrSet = document.getElementsByClassName("component_wrapper");
    var titles = {};

    for (var i=0; i<hdrSet.length; i++){
        if ( !titles[ hdrSet[i].title ] )  {
            titles[ hdrSet[i].title ] = true;
            hdrSet[i].style.display = "inline";
        }
    }
}
checkComponent();

问题是，当我加载页面时，我正在尝试将目标显示的div（好），但是还有一个div未显示目标。在上面的例子中，前四个div显示，当我想要的只是前三个。我的代码出了什么问题......是否有更好的方法来构建函数？

Answer 1

您的代码会检查重复的标题，而不是遗漏的标题。以下是解决这个问题的方法：

function checkComponent(){
    var hdrSet = document.getElementsByClassName("component_wrapper");

    for (var i = 0; i < hdrSet.length; i++){
        if(hdrSet[i].title) {
            hdrSet[i].style.display = "inline";
        }
    }
}
checkComponent();

此外，如果你打开使用jQuery，它会更整洁，更兼容：

function checkComponent() {
    $('.component_wrapper[title]:not([title=""])').css('display', 'inline');
}
checkComponent();

定位阵列的选定成员

1 个答案: