4

我有以下代码可以在浏览器控制台中运行，这些代码似乎可以与我的所有 fontawesome 图标一起按预期工作......

jQuery(window).on('load', function () {
  $('.icon-wrapper').click(function() {
    $('.icon-wrapper').each(function(){
      $(this).find('a').removeClass('storyline-header-nav-active-color');
    });
    $(this).find('a').addClass('storyline-header-nav-active-color');
  });
});

但是，当我在应用程序中运行它时，它适用于这些图标......

div[class="icon-wrapper fa-3x"]
        = link_to(@storyline_calendars_path, data: { "turbo-frame": "storyline-calendar-todos-org-detail-contents" }) do
          i[class="far fa-calendar-alt"]

但它不适用于这些图标...

div[class="icon-wrapper fa-3x"]
        = link_to(@storyline_communications_contents_types_path_email, data: { "turbo-frame": "storyline-communications-contents" }) do
          span[class="fa-layers fa-fw"]
            i[class="fas fa-envelope-square"]
            span[class="fa-layers-counter fa-layers-top-right"]
              = @email

我唯一的猜测是其中一个是使用 svg 图层，而另一个不是。我已经在网上挖遍了这件事，我一无所获。有没有人对此有想法或指示？

更新

当我不使用图层进行计数时，它可以完美运行。想法？

      div[class="icon-wrapper fa-3x"]
        = link_to(@storyline_communications_contents_types_path_email, data: { "turbo-frame": "storyline-communications-contents" }) do
          i[class="fas fa-envelope-square"]
4

1 回答 1

2

如图所示，我必须与其他包装器分开绑定到图层...

jQuery(window).on('load', function () {
  $('.icon-wrapper').click(function() {
    $('.icon-wrapper').each(function(){
      $(this).removeClass('storyline-header-nav-active-color');
    });
    $(this).addClass('storyline-header-nav-active-color');
  });

  $('.fa-layers ').click(function() {
    $('.fa-layers ').each(function(){
      $(this).removeClass('storyline-header-nav-active-color');
    });
    $(this).addClass('storyline-header-nav-active-color');
  });
});
于 2021-07-25T21:06:22.570 回答