javascript - 使用 javascript 显示/隐藏 的子元素

Question

我的 mvc 4 项目中的 .cshtml 页面上有一个 razor 循环，我需要在该 razor 循环中显示隐藏列表的子项。该代码适用于第一个元素，但不适用于其余元素。

.cshtml代码

<ol>
    @foreach (var Name in (List<string>)ViewData["Names"])
    {
        <li onclick="makevisible();" ondblclick="makeinvisible();">
            @Name
            <ul id="list" class="list">
                <li>childWichNeedsToBeHidden</li>
            </ul>
        </li>
    }
</ol>

我的 JavaScript:函数makevisible() {$('#list').show();}和:函数 makeinvisible() {$('#list').hide();}

我的CSS:.list {display:none;}

编辑

我的新 .cshtml 代码

    @{
      int i = 0;
      foreach (var Name in (List<string>)ViewData["Names"])
      {
          i++;
          <li onclick="makevisible();" ondblclick="makeinvisible();">
            @Name
             <ul class="list" id="@i">
                <li>childWichNeedsToBeHidden</li>
             </ul>
          </li>
      }
    }

现在每个 ul 都有一个唯一的 id。但我不知道我的 javascript 应该是什么。我可以显示隐藏特定的子 ul，如第三个:

        function makevisible() {
            $('#3').show();
        }
        function makeinvisible() {
            $('#3').hide();
        }

如何使 #3 成为变量，以便我可以显示隐藏任何我想要的子 ul？

Answer 1

你应该尝试

function makevisible() {
    $(this).find('.list').show();
}

function makeinvisible() {
    $(this).find('.list').hide();
}

您不应该在 foreach 中为 ul 使用相同的 id。