データ属性を使った紐づけをしたい

Question

<div class='menu'>
 <span class='menu_btn' data-type='one'>one</span>
 <span class='menu_btn' data-type='two'>two</span>
</div>
<div class='contents'>
 <p class='title' data-type='one'>one</p>
 <p class='title' data-type='two'>two</p>
</div>

クリックしたメニューとタイトルをデータ属性を使って紐づけしたいです。

$('.menu_btn').click(function() {
　var data = $(this).data('type');

メニューのデータ属性はこれで収めるとして、タイトルのデータ属性との紐ずけはどうやるのですか？

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、提示されたコードには「scroll-place-type」が無いのでデータが得られませんよ。

[m.ts10806]

タイトルにはタグにあるもの、「質問である」ことはなくても良いですよ

Answer 1

$( '.menu_btn' ).click( function() {
	var type = $( this ).data( 'type' );
	var $title1 = $( '.title[data-type="' + type + '"]' ); // data-type が書き換わらない場合
	var $title2 = $( '.title' ).filter( function() { return type === $( this ).data( 'type' ); } );// data-type が書き換わる場合
} );

【.filter() | jQuery API Documentation】
https://api.jquery.com/filter/#filter-function

Answer 2

タイトルの部分は、ソースコードにすると以下のような感じになると思います。名前が合わないところは合わせておきました。

<div class='menu'>
<span class='menu_btn' data-scroll-place-type='one'>one</span>
<span class='menu_btn' data-scroll-place-type='two'>two</span>
</div>
<div class='contents'>
<p class='title' data-title-type='one'>one</p>
<p class='title' data-title-type='two'>two</p>
</div>

$('.menu_btn').click(function() {
  var data = $(this).data('scroll-place-type');
  var dataTitle = $('.title').data('title-type')
});