Question

我有标题，他们有兄弟姐妹，其中一个是div clearfix，在这个div中有一个ul的盒子内容，还有一些项目，其中一些隐藏，其中一些显示有一个ol列表，应该点击它，如果在这个例子中的项目列表中没有项目电池它不应该显示标题标题（div类名称这是reltitles）记住，我们有很多标题标题和框内容和div，所以它应该工作一般不是特定的

<div class="reltitles" id="Batteries" style="display:block;">
    <font class="resultHeader">(2) Batteries </font> 
</div>
<div class="clearfix" value="Batteries" name="Batteries" id="Batteries">
    <ul class="box-content" id="Batteries">
        <li id="50-80" class="item first" style="display: none;"></li>
        <li id="50-80" class="item first" style="display: none;"></li>
        <li id="20-50" class="item">
            something here 
        </li>
    </ul>
</div>

要点击的列表：

<ol id="myAnchor">
    <li><a id="0-20" href="#">0.00 - 20.00</a></li>
    <li><a id="20-50" href="#">20.00 - 50.00</a></li>
    <li><a id="50-80" href="#">50.00 - 80.00</a></li>
    <li><a id="80-100" href="#">80.00 - 100.00</a></li>
    <li><a id="All" href="#">All</a></li>
</ol>

这是我的java脚本代码无法正常工作我使用chrome工具调试但仍然无法理解：

j$("#myAnchor li a").click(function(){
    var prices = j$(".box-content li");
    prices.show();
    if (this.id != "All")
    { prices.not(j$(".box-content li[id='"+this.id+"']")).hide();
    }
    var tt=document.getElementsByClassName("reltitles");
    for(k=0;k<tt.length;k++)
    {
        var clear=tt[k].nextElementSibling;
        var list=clear.childNodes[1].children;
        j=0;
        for(i=0;i<list.length;i++)
            {

            if(list[i].style.display=="none")
            {
                j++;
            }
            if(j==list.length)
                {
                tt[k].style.display="none";
                }
            else{ tt[k].style.display="block";}
            }
    }
     });

UPDATe：ids是唯一的，它们将由php代码生成我只想展示它更简单

Answer 1

对不起，我不完全确定你到底想要做什么。在这里，我在这里创建了一个jsfiddle http://jsfiddle.net/5VTYS/4/，我在其中进行了更改以避免您在下面提到的代码中出现的语法错误

$（＆＃34; #myAnchor li a＆＃34;）。click（function（）{

    var tt=document.getElementsByClassName("reltitles");
    var j = 0;
        for(k=0;k<tt.length;k++)
        {
            var clear=tt[k].nextElementSibling;
            var list=clear.childNodes[1].children;
            for(i=0;i<list.length;i++)
                {
                if(list[i].style.display=="none")
                {
                    j++;
                }
                if(j==list.length)
                    {
                    tt[k].style.display="none";
                    }
                }
        }

}）;

如果我理解错误，请编辑代码。

但是，您的代码中存在一些语法错误：

var list = clear.childNodes [1] .children（）;应该是var list = clear.childNodes [1] .children;
j $（＆＃34; #myAnchor li a＆＃34;）应该是这个 - ＆gt; $（＆＃34; #myAnchor li a＆＃34;）
在递增值之前定义j。

希望这有帮助。

Answer 2

＆＃34;这是一个基于标题主题的示例：

HTML：

<div class="reltitles" id="Batteries" style="display:block;">
    <font class="resultHeader">(2) Batteries </font> 
</div>
<div class="clearfix" value="Batteries" name="Batteries" id="BatteriesList">
    <ul class="box-content" id="Batteries">
        <li id="50-80" class="item first" style="display: none;">batterie 1</li>
        <li id="50-80" class="item first" >Batterie 2</li>

        </ul>
    </div>
<ol id="myAnchor">
    <li><a id="0-20" href="#">0.00 - 20.00</a></li>
    <li><a id="20-50" href="#">20.00 - 50.00</a></li>
    <li><a id="50-80" href="#">50.00 - 80.00</a></li>
    <li><a id="80-100" href="#">80.00 - 100.00</a></li>
    <li><a id="All" href="#">All</a></li>
</ol>

JS：

$("#myAnchor li a").click(function(){
   var visible = false;
    $('#BatteriesList').find('li').each(function(value) {
        visible |= $(this).is(":visible");
    });
    if (!visible) {
        $('#Batteries').hide();
    }
});

当所有孩子都没有显示时，如何隐藏上部div

2 个答案: