web-dev-qa-db-ja.com

FontAwesome 5 on click event？

私がやろうとしていること

Font Awesome4.7からFontAwesome 5に切り替えたところ、1つを除いてすべてが正常に機能しています。サイトの一部で、フォントのすばらしいアイコンをトグルエスクボタンとして使用しています。クリックすると、「開いた」ハートを「閉じた」ハートのアイコン（fas fa-heart <-> far fa-heart）に変更したいと思います。これを行うには、ブラウザーのインスペクターでSVG要素のデータプレフィックスを変更します。

問題

私の問題は、そこにあった要素が削除されてSVGに置き換えられるときに、クリックリスナーをバインドすることです。これらのハートアイコンを持つ要素をページに動的に追加し、JSハンドルバーを使用してHTMLを生成した後、jquerys .on（ "click"）メソッドを使用して、ボタンがクリックされたタイミングを取得し、クラスを切り替えます。要素が置き換えられなかったときはこれで問題ありませんでしたが、SVGの変更により、これを行う新しい方法は何ですか？

考えられる解決策

Font Awesomeの「ハウツー」ガイドを読みましたが、このようなトピックはまだ取り上げていません。これは人々がやりたいと思う一般的なことなので、人々が使用できるソリューションのリストを入手するのは素晴らしいことです。以下は私が考えた2つのアイデアですが、FontAwesomeが提供しなければならないアイデアですが、もっと良い方法があるかどうか知りたいです。

  1. リスナーを追加する前に短いタイムアウトを使用します-ただし、せいぜいハッキーのようです。
  2. クリック時にラッパー要素を使用し、クリックするたびにSVG要素を検索します。
  3. FontAwesomeは、アイコンが置き換えられたときのコールバックを提供できます。

フィドルの例

これは、ボタンがドキュメントに動的に追加される単純化された例です（これは、$（document）.ready（）を使用している場合は正常に機能しますが、APIリクエストを実行してからhtmlを動的に生成しています）。要素がSVGへの要素の置き換えを完了していないため、ボタンをクリックしてもリスナーは呼び出されません。

https://jsfiddle.net/L748ownw/

<div id='container'></div>

$("#container").append("<i id='heart' class='far fa-heart'></i>");
$(".far").on("click", function() {
  console.log("clicked");
});

この例は、要素が置き換えられていないため、FontAwesome4.7で正常に機能します。

jquerysvgfont-awesome-5
7
Joe Jankowiak

最良の状況では、pointer-events: none;はsvgクリックリスナーの問題を修正します。ただし、この場合、このソリューションは機能しません。より良い解決策があります。<i>タグにonclick属性を設定し、jquery関数をjavascriptで処理します。

$("#heart").attr('onClick', 'callFunction(this)');

しかし、commenttoggleClassまたはclassを変更するための何かで言ったように、<i>タグをsvgに変換するため、問題は解決しません。クラス名を切り替えてもハートの形を変えることはできません。唯一の解決策は、次のようにsvgに変換する前に変更することです。

 var click = false;
  function callFunction(el) {
    if (!click) {
      $("#container").empty().append("<i id='heart' class='fas fa-heart'></i>");
      $("#heart").attr('onClick', 'callFunction(this)');
      click = true;
    } else {
      $("#container").empty().append("<i id='heart' class='far fa-heart'></i>");
      $("#heart").attr('onClick', 'callFunction(this)');
      click = false;
    }
  }

Working Demo

3
Pedram

Fontawsomeには、サイトでクリックイベントを処理する方法の優れた例があります。

このメソッドは、onClickで「toggleClass」を探していたときにうまく機能しました。前の答えより少し簡単なようです。私はこれをテストしました、そしてそれはうまく働いています。

document.addEventListener('DOMContentLoaded', function () {
$('button').on('click', function () {
  $(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');
  });
});

ここでの例

私はこれに苦労している人のために私自身の例を追加することにしました：

document.addEventListener('DOMContentLoaded', function () {
  jQuery('.ppolicy-link').on('click', function () {
            var collapsed=jQuery(this).find('[data-fa-i2svg]').hasClass('fa-plus-square');
            jQuery('.btn-link').find('[data-fa-i2svg]').removeClass('fa-minus-square');
            jQuery('.btn-link').find('[data-fa-i2svg]').addClass('fa-plus-square');
            if(collapsed)
                jQuery(this).find('[data-fa-i2svg]').toggleClass('fa-plus-square fa-minus-square')
        });
    });

私はjQueryno-conflictとBootstrap 4アコーディオン、WordPressを使用しています。これは私にとってうまく機能しています。

0
ben.kaminski