jquery ruby​​ rails hotwire turbolinks 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"]

解决方法

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

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