Question

我在div元素中有一个表

<div id="E" ng-model="total">
    <div ng-if="total.passfail" onclick="showE1()">{{total.passfail}} scripts Passed in {{Listbox}} and failed in {{Comparebox}}</div>
    <table width="100%" id="E1">                            
        <thead>
            ...lots of trs and tds                                  
        </thead>

        <tbody>
            ...lots of trs and tds
        </tbody>
    </table>  
 </div>

单击文本时，应调用showE1并隐藏/显示表格。当我调试它时，它进入showE1 onclick函数，但显示没有改变。我正在制作一个新手的错误吗？

function showE1(){  
      document.getElementById("E1").style.display = "block" ? "none" : "block";
}

Answer 1

如果“block”为真，则三元运算符将返回“none”，如果不是则为“block”。因为“block”是一个常数并且评估为truthy

document.getElementById("E1").style.display = "block" ? "none" : "block";

将永远返回“无”。你想要这个吗？

document.getElementById("E1").style.display = (document.getElementById("E1").style.display == "block") ? "none" : "block";

Answer 2

你正在使用inline-if语句，但你的逻辑测试只是“阻塞”。如果你问Javascript“阻止？”，这不会导致true / false。如果当前值等于“阻止”，则需要进行测试。

Answer 3

对我而言，它的工作方式与你一样。

               function showE1()
                {   

                    document.getElementById("E1").style.display = "block" ? "none" : "block";
                }

             <div id="E" ng-model="total">
                <div ng-if="total.passfail" onclick="showE1()">{{total.passfail}} scripts Passed in {{Listbox}} and failed in {{Comparebox}}</div>


                    <table width="100%" id="E1">


                        <thead>
                            <tr><td>Something</td></tr>

                        </thead>

                        <tbody>
                            <tr><td>Something else</td></tr>

                        </tbody>
                    </table>  
 </div>

仔细检查您的测试平台上运行的代码是否实际上是您发布的问题。

隐藏/显示一个表onclick不在div

3 个答案: