jquery ruby rails hotwire turbolinks fontawesome答案

【问题标题】：jquery ruby rails hotwire turbolinks fontawesomejquery ruby rails hotwire turbolinks fontawesome
【发布时间】：2021-09-22 08:49:06
【问题描述】：

我有以下代码，我可以在浏览器控制台中运行，这些代码似乎可以与我的所有 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 ruby-on-rails font-awesome hotwire-rails

【解决方案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');
  });
});

【讨论】：