为什么我的 jquery 切换不起作用答案

【问题标题】：Why is my jquery toggle not working为什么我的 jquery 切换不起作用
【发布时间】：2016-10-17 01:46:40
【问题描述】：

这就是为什么我的切换不起作用

<script>
    $(document).ready(function () {
        $("#tab").hide()
        $("#btn1").click(function () {
            $("#tab").toggle();
        }) 
     })       
</script>

HTML 代码

<div>
    <table>
        <tr>
            <th>
                <b>Employee Name</b>
            </th>
        </tr>
        <tr ng-repeat="Emp in John">
            <td>
                <input type="button" id="btn1" value="click" />
                {{Emp.Name}}
                <table id="tab">
                    <tr>
                        <th>
                            <b>OrderId</b>
                        </th>
                    </tr>
                    <tr ng-repeat="Joy in Emp.order">
                        <td>
                            {{Joy.OrderId}}

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

【问题讨论】：

你能检查一下吗？你有 ng-repeat ，意味着一个循环，你可以有多个具有相同 id 的元素，这可能会导致问题。
工作正常：jsfiddle.net/zjk02e6d 你有实际演示问题的代码吗？
无法在代码上方运行
@WaheedMohammad：“以上代码”被复制并逐字粘贴到 jsFiddle，明显有效。再试一次。或者，也许您可以至少花一点时间更清楚地描述问题。试着理解我们无法从这里看到您的屏幕。 “不工作”不是对问题的描述。
为什么首先要使用 jQuery，doh...

标签： jquery html angularjs

【解决方案1】：

您应该使用 ng-click 并为每个元素提供唯一的 ID，如下所示。

<div>
    <table>
        <tr>
            <th>
                <b>Employee Name</b>
            </th>
        </tr>
        <tr ng-repeat="Emp in John track by $index">
            <td>
                <input type="button" id="btn1{{$index}}" value="click"  ng-click="toggel($index)"/>
                {{Emp.Name}}
                <table id="tab{{$index}}">
                    <tr>
                        <th>
                            <b>OrderId</b>
                        </th>
                    </tr>
                    <tr ng-repeat="Joy in Emp.order">
                        <td>
                            {{Joy.OrderId}}

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

你可以编写 Angular js 函数来实现切换效果。如下所示

$scope.toggel = function(index){
$("#tab"+index).toggle();

}

【讨论】：

【解决方案2】：

您忘记了几个分号。可能是原因。

<script>
    $(document).ready(function () {
        $("#tab").hide();
        $("#btn1").click(function () {
            $("#tab").toggle();
        }); 
     });       
</script>

【讨论】：