jquery ruby rails hotwire turbolinks fontawesome

Question

我可以在浏览器控制台中运行编写以下代码，它似乎可以像预期的那样与我的所有 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');
  });
});

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

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

Answer 1

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

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');
  });
});

jquery ruby rails hotwire turbolinks fontawesome

jquery ruby rails hotwire turbolinks fontawesome

jquery

ruby-on-rails

font-awesome

hotwire-rails