Каждая функция работает только для четных чисел - PullRequest
Новая
       8

Каждая функция работает только для четных чисел

0 голосов
/ 03 марта 2020

Я пытаюсь получить его, чтобы класс переключался на отдельных div's внутри элемента li в al oop. Но, к примеру, работают только 2-й и 4-й, 1-й и 3-й не переключаются. 

<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>

1 Ответ

4 голосов
/ 03 марта 2020

Проблема в том, что вы объявляете обработчик события hover в l oop, который несколько раз присоединяет его к одним и тем же элементам. Это приводит к странному поведению, которое вы видите.

Чтобы исправить это, создайте обработчик событий один раз, либо в head, как в примере ниже, либо непосредственно перед </body>. По вашему l oop я вижу, что вы вводите данные со стороны сервера в элементы управления, поэтому используйте атрибут 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, что является гораздо лучшим решением.

...