0

mvc 4 プロジェクトの .cshtml ページにカミソリ ループがあり、このカミソリ ループ内でリストの子を非表示にする必要があります。コードは最初の要素では機能しますが、残りの要素では機能しません。

.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: function makevisible() {$('#list').show();} および: function 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がどうあるべきかわかりません。3 番目のような特定の子 ul を非表示にするには、次のようにします。

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

#3 を変数にして、必要な子 ul を非表示にできるようにするにはどうすればよいですか?

4

2 に答える 2

2

あなたはで試してみるべきです

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

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

foreachのulに同じIDを使用しないでください。

于 2013-03-20T11:52:59.293 に答える
0 
<ol>
    @foreach (var Name in (List<string>)ViewData["Names"])
    {
        <li class="parentLI" onclick="makevisible();" ondblclick="makeinvisible();">
            @Name
            <ul class="list">
                <li>childWichNeedsToBeHidden</li>
            </ul>
        </li>
    }
</ol>

そして、あなたのスクリプトは

<script type="text/javascript">
 $(function(){

  $(".parentLI").click(function(){
    $(this).closest("ul.list").hide();
});

});
</script>

dblclick同じ方法でイベントをバインドします

于 2013-03-20T11:53:42.133 に答える