[jQuery] 呼応する選択肢に色をつけたい

前提・実現したいこと

現在jQueryを使ってアプリを作っています。
画面は下記のような状況です。

そこで質問があるのですが、
この上の選択肢を選んだ際にそれに呼応する下の選択肢の色も変わるようにするにはどうしたらいいでしょうか？

ソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
6<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
7<style>
8.check{
9  background-color: aqua !important;
10}
11
12.backBox1 .box{
13    width: 150px;
14    height: 50px;
15    background-color: #EFE;
16    border: solid 1px #CCC;
17    margin: 20px 0 0 0;
18}
19
20.backBox2 .box{
21    width: 150px;
22    height: 50px;
23    background-color: #EFE;
24    border: solid 1px #CCC;
25    margin: 20px 0 0 0;
26    pointer-events : none;  /*下段の選択肢のクリックを無効化*/
27}
28
29</style>
30</head>
31<body>
32    <div class="backBox1">
33      上
34      <div class="box">b1</div>
35      <div class="box">b2</div>
36      <div class="box">b3</div>
37    </div>
38    <hr>
39    <div class="backBox2">
40      下
41      <div class="box">b1</div>
42      <div class="box">b2</div>
43      <div class="box">b3</div>
44    </div>
45<script>
46$(function(){
47
48  //選択肢押下時
49  $('.box').click(function(){
50    //全チェックを外す
51    $('.box').removeClass('check');
52
53    //選択したものにチェックを付ける
54    $(this).addClass('check');
55
56    //TODO それと呼応する選択肢にもチェックを付ける
57  });
58});
59</script>
60</body>
61</html>
62

補足情報

ソースコード上の「TODO」の箇所に「呼応する選択肢にcheckクラスを追加し、背景色が変わる」処理を追加したいです。その方法がわからずにいるのでもしわかる方は教えていただけると嬉しいです。

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

回答2件

無理なくやるとこんな感じでした。

JavaScript
1var $box = $('.box'),
2    $box1 = $('.backBox1').find('.box'),
3    $box2 = $('.backBox2').find('.box');
4
5$box.click(function(){
6    var $target1 = $(this),
7        targetIndex = $box1.index($target1), // クリックしたボックスのindexを取得
8        $target2 = $box2.eq(targetIndex), // 上記indexを元に対応するboxを取得
9        $target = $target1.add($target2); // $target1と$target2を合わせる
10  
11    //全チェックを外す
12    $box.removeClass('check');
13    //選択したもの+対応したものにチェックをつける
14    $target.addClass('check');
15  });

投稿2016/03/11 18:02

yamato_hikawa

総合スコア2092

k499778

2016/03/12 00:07

回答ありがとうございます。 addメソッドを使ってそのようなことが実現できるんですね。知りませんでした。勉強になりました。感謝しています。

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

ベストアンサー

html部分は変えずにということですと、

javascript
1    //TODO それと呼応する選択肢にもチェックを付ける
2    var target_txt_cont = $(this).text();
3
4    $(".backBox2 .box:contains('"+target_txt_cont+"')").addClass('check');