jQueryで他要素のイベントを実行する方法【AをクリックでBのイベント発火】

jQueryで他要素のイベントを実行する方法【AをクリックでBのイベント発火】

みなさんこんにちは、ゆうやです!

「俺ガイル」第3期のティザーPVが公開された今日このごろ、いかがお過ごしでしょうか。

本記事では、表題の通り「jQueryで他要素のイベントを実行する方法」を紹介します!

使用するシチェーションとしては、以下が挙げられます。

  • 〇〇ボタンをクリックした時に△△のクリックイベントを実行したい
  • □□をクリックしたときと同じ動作を☆☆をクリックした時にも行いたい

それでは早速見ていきましょう〜

共通のHTML

html
<div id="CircleBtn">〇〇ボタン</div>
<div id="TriangleBtn">△△ボタン</div>

triggerメソッドを使用する

js

$('#TriangleBtn').on('click', function(e){
  $('.hogehoge').addClass('on');
});

$('#CircleBtn').on('click', function(e){
  $('#TriangleBtn').trigger('click');
});

clickメソッドを使用する

js

$('#TriangleBtn').on('click', function(e){
  $('.hogehoge').addClass('on');
});

$('#CircleBtn').on('click', function(e){
  $('#TriangleBtn').click();
});

まとめ

いかがでしたでしょうか。

「他要素のイベント実行方法」を知ることはできましたでしょうか。

知っていればなんてことのないものでしたね笑

最後までご高覧いただきありがとうございました。