jqueryのコードを簡略化したいです。

Question

jqueryで、idが地名2の要素にマウスオーバーした際に、idが地名1の要素の枠線の色が変わるようにコードを書いたのですが、この書き方だと要素が沢山あり長くなってしまうので短くしたいです。

<div class="container">
  <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg  id="x="0px" y="0px" width="1200px" height="800px" viewBox="40 90 700 400" style="enable-background:new 0 0 800 600;" xml:space="preserve">
  <rect id="tokyo1" x="245.551" y="72.796" width="100" height="140"/>
  <rect id="osaka1" x="296.571" y="152.388" width="100" height="140"/>
  <rect id="nagoya1" x="253.034" y="240.823" width="100" height="140"/>
  <rect id="fukuoka1" x="331.265" y="268.034" width="100" height="140"/>
  <rect id="yokohama1" x="382.285" y="363.272" width="100" height="140"/>
  </svg>

  <ul>
    <p>地区一覧</p>
    <li><a id="tokyo2" href="#">東京</a></li>
    <li><a id="osaka2" href="#">大阪</a></li>
    <li><a id="nagoya2" href="#">名古屋</a></li>
    <li><a id="fukuoka2" href="#">福岡</a></ul>
    <li><a id="yokohama2" href="#">横浜</a></li>
  </ul>
</div>

$(function(){
   $('#tokyo2')
    .hover(function(e){
        $('#tokyo1').css('stroke','blue');
    },
    function(e){
        $('#tokyo1').css('stroke','');
    });

    $('#osaka2')
    .hover(function(e){
        $('#osaka1').css('stroke','blue');
    },
    function(e){
        $('#osaka1').css('stroke','');
    });
    
    $('#nagoya2')
    .hover(function(e){
        $('#nagoya1').css('stroke','blue');
    },
    function(e){
        $('#nagoya1').css('stroke','');
    });

    $('#fukuoka2')
    .hover(function(e){
        $('#fukuoka1').css('stroke','blue');
    },
    function(e){
        $('#fukuoka1').css('stroke','');
    });

    $('#yokohama2')
    .hover(function(e){
        $('#yokohama1').css('stroke','blue');
    },
    function(e){
        $('#yokohama1').css('stroke','');
    });
});

わかる方がおられましたらご教授お願い致します。

Comments

[hentaiman]

アイデアが欲しいという事ですか？

[m.ts10806]

「短くしたい」→「わかる人」
というのは何を求めているのでしょう。作業依頼ですか？

[退会済みユーザー]

申し訳ございません。考え方を教えていただけますと幸いです。

[m.ts10806]

質問は編集できます。赤の他人に質問の意図を確実に伝える表現に調整してください。

Answer 1

<div class="container">
  <?xml version="1.0" encoding="utf-8"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg  id="x="0px" y="0px" width="1200px" height="800px" viewBox="40 90 700 400" style="enable-background:new 0 0 800 600;" xml:space="preserve">
  <rect id="tokyo" x="245.551" y="72.796" width="100" height="140"/>
  <rect id="osaka" x="296.571" y="152.388" width="100" height="140"/>
  <rect id="nagoya" x="253.034" y="240.823" width="100" height="140"/>
  <rect id="fukuoka" x="331.265" y="268.034" width="100" height="140"/>
  <rect id="yokohama" x="382.285" y="363.272" width="100" height="140"/>
  </svg>

  <ul>
    <p>地区一覧</p>
    <li><a class='area' data-target='#tokyo' href="#">東京</a></li>
    <li><a class='area' data-target='#osaka' href="#">大阪</a></li>
    <li><a class='area' data-target='#nagoya' href="#">名古屋</a></li>
    <li><a class='area' data-target='#fukuoka' href="#">福岡</a></ul>
    <li><a class='area' data-target='#yokohama' href="#">横浜</a></li>
  </ul>
</div>

$(function(){
    $('.area').hover(
        function(e) {
            $($(this).data('target')).css('stroke','blue');
        },
        function(e){
            $($(this).data('target')).css('stroke','');
        }
    );
});

Comments

[phper.k]

何でもかんでも id つけるのは汚くなるだけ。
string + int の命名はさらにメンテナンス性損なうのでアウト！

[退会済みユーザー]

idについての助言までいただきありがとうございます。今後気を付けていきます。

Answer 2

考え方を教えていただけますと幸いです。

とのことなので考え方だけ。

$('xxx')
    .hover(function(e){
        $('xxx').css('stroke','blue');
    },
    function(e){
        $('xxx').css('stroke','');
    });

見た感じだと上記の'xxx'以外は全て同じだと思うので、'xxx'の箇所を配列で用意し、forループで回すとまとめて記述できますし、色の変更等も一つの修正で済みます。

Comments

[yuuyu]

なるほど、jqueryはクラス指定するとループを回す必要もないんですね。
素のjsを記述する際の考え方で回答してしましました。。

[退会済みユーザー]

ありがとうございます。

Answer 3

色々手法はあるでしょうが、アイデアの一つとしてリンクに共通のクラスとdata属性を持たせ、その中に対象のIDを指定することで、で一つの関数で済むのではないでしょうか？

Comments

[退会済みユーザー]

おっしゃる通りでした。ありがとうございます。