jQuery で条件に合った値を取得するにはどうしたらいいでしょうか？

完成イメージがこれです

「１を赤にする」というボタンを押せば、
「名無し１といいます」という文字を赤にすることができるような機能をつけたいです。
このようなのが100 くらいあるので変数を使ってjQuery を使いたいのですが、
やり方がわかりません。おしえてください。

test.html.erb

<label class="color-btn  " data-color="red" data-num="1">
  <input type="button" value="1を赤にする"> 
</label>

<dl>
  <dt res="1">
    <font ">名無し１</font>
  </dt>
  <dd class="number">
    名無し１といいます
   </dd>
</dl>


<label class="color-btn " data-color="red" data-num="2">
  <input type="button" value="2を赤にする"> 
</label>

<dl>
  <dt res="2">
    <font>名無し２</font>
  </dt>
  <dd class="number">
    名無し２といいます
  </dd>
</dl>

まずしたことは jQuery をつかってクリックしたボタンに対応するコメントの番号を取得するために


  $('.color-btn').click(function(){
    var color = $(this).attr('data-num');
  });

としました。ここで１つ目のボタンをクリックしたとすると
1 という数字が得られています。次に、この 1 を利用して

<dt res="1"> 内部のテキストの色をかえたいです。しかしこのやり方がわかりません。どのようにしたらいいでしょうか？

kei344

2016/12/23 11:12

まだ質問が「受付中」になっていますが、「解決済」にされてはいかがでしょうか。また、解決していない場合は状況を質問文に追記ください。

Ohiirechan

2016/12/23 11:57

あっ忘れてました。ご報告ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょうか。

javascript
1$('.color-btn').click(function(){
2	var color = $(this).attr('data-color'),
3		num = $(this).attr('data-num');
4
5	$("dt[res='" + num + "'] font").css("color", color);
6});