每个函数仅适用于偶数

Question

我正在尝试获取它，以便 class 在循环中的 li 元素内切换单个 div's。但是例如只有第二和第四似乎工作，第一和第三不切换。

<ul class="card-ul">
    @foreach (Item menuLinks in folder.Children)
    {
        if (folder.GetChildren().Count > 0)
        {
            <li>
                @Html.Sitecore().Field("LinkURL", menuLinks, new { text = menuLinks.Name })
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                <script>
                    $(".card-ul li").each(function (index) {
                        $(this).hover(function () {
                            $(this).children("div").toggleClass("@Html.Sitecore().Field("HoverIcon", menuLinks)")
                                .toggleClass("@Html.Sitecore().Field("CircusIcon", menuLinks)");
                        });
                    });
                </script>
                <div class="@Html.Sitecore().Field("CircusIcon", menuLinks)"></div>

            </li>
        }

    }
</ul>

Answer 1

问题是因为您在循环中声明了 hover 事件处理程序，它多次将其附加到相同的元素。这会导致您看到奇怪的行为。

要修复此问题，请创建事件处理程序一次，可以在 head 中（如下例所示），也可以就在 </body> 之前。我可以从您的循环中看到您正在将数据从服务器端注入到控件中，因此请使用 data 属性来检索这些数据。它应该看起来像这样：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      jQuery($ => {
        $(".card-ul li div").hover(function() {
          var $el = $(this);
          $el.toggleClass($el.data('hovericon') + ' ' + $el.data('circusicon'));
        });
      });
    </script>
</head>

<body>
  <ul class="card-ul">
    @foreach (Item menuLinks in folder.Children) 
    { 
      if (folder.GetChildren().Count > 0) 
      {
        <li>
          @Html.Sitecore().Field("LinkURL", menuLinks, new { text = menuLinks.Name })
          <div class="@Html.Sitecore().Field("CircusIcon", menuLinks)" data-hovericon="@Html.Sitecore().Field("HoverIcon", menuLinks)" data-circusicon="@Html.Sitecore().Field("CircusIcon", menuLinks)"></div>
        </li>
      } 
     }
  </ul>
</body>

另请注意，根据您切换的类实际执行的操作，可能仅 CSS 即可实现此目的，这是一个更好的解决方案。

每个函数仅适用于偶数

Each function only working for even numbers

jquery

sitecore