jQuery チェックボックスに連動して、a要素にあるtitle属性を非表示・表示を切り換えたい。

Question

jQueryにおいて、チェックボックスのチェックありなしに連動して、a要素にあるtitle属性を非表示・表示を切り換える処理を行いたいと考えています。そのときに、id=no-1のチェックボックスをチェックすると、a要素のclass="no-1"がついたa要素のtitle属性を表示/非表示するように動作させたいと考えています。

<input type="checkbox" value="no-1" id="no-1">no-1
<input type="checkbox" value="no-2" id="no-2">no-2
<input type="checkbox" value="no-3" id="no-3">no-3

<a href="#" title="あ" target="_blank"class="no-1">あ</a>
<a href="#" title="い" target="_blank"class="no-1">い</a>
<a href="#" title="う" target="_blank"class="no-1">う</a>
<a href="#" title="え" target="_blank"class="no-1">え</a>
<a href="#" title="お" target="_blank"class="no-1">お</a>
<a href="#" title="か" target="_blank"class="no-2">か</a>
<a href="#" title="き" target="_blank"class="no-2">き</a>
<a href="#" title="く" target="_blank"class="no-2">く</a>
<a href="#" title="け" target="_blank"class="no-2">け</a>
<a href="#" title="こ" target="_blank"class="no-2">こ</a>
<a href="#" title="さ" target="_blank"class="no-3">さ</a>
<a href="#" title="し" target="_blank"class="no-3">し</a>
<a href="#" title="す" target="_blank"class="no-3">す</a>
<a href="#" title="せ" target="_blank"class="no-3">せ</a>
<a href="#" title="そ" target="_blank"class="no-3">そ</a>

一応自分でも考えてソースを書いてみたのですが、何度やっても上手くいきません。
私の書いたソースは以下のとおりです。
とりあえずチェックボックスのうち一つ分に関して、書いてみたのですが、何が違うのでしょうか？

$(function() {
  $("#no-1").on("change", function() {
    $(".no-1").each(function() {
      var title = $(this).attr("title");
      if ($(this).attr("title") == title) {
      $(this).attr("title", "");
      } else if ($(this).attr("title") == "") {
        $(this).attr("title", title);
      }
  });
});

私の方で確認するに、$(this).attr("title");において、titleの値が取れておらず空になってしまうため、上手く作動しないものだと考えています。

もしどなたか良い書き方をご存じでしたらご教授お願い致します。
宜しくお願い致します。

Answer 1

こんな感じでしょうか？

$(function(){
  $('.no-1,.no-2,.no-3').each(function(){
    $(this).data('title',$(this).attr('title'));
  });
  $('#no-1,#no-2,#no-3').on('change',function(){
    var flg=$(this).prop('checked');
    $('.'+$(this).prop('id')).each(function(){
      $(this).attr('title',flg?'':$(this).data('title'));
    });
  }).change();
});

Comments

[hdahrn]

回答ありがとうございます。
しっかり目的の動作になっておりました！
使ったことのないメソッドもあり、大変勉強になりました。
この度は本当にありがとうございました。
深く感謝申し上げます。

Answer 2

目的は
target="_blank"class="no-1">あ</a>
の部分の"あ"ではなく
<a href="#" title="あ"
のtitle="あ"部分の書き換えがいたいという事でよいですか？

このスクリプトではまず最初にチェックボックスにチェックをいれると
title="あ"がtitle=""
になりますが、次にチェックをはずすと

var title = $(this).attr("title");
の値は空になりますので

titleの値が取れておらず空になってしまうため、

になっています。'あ'、とか'い'とかをつけたり消したりしたいのであれば、この場合、titleと<a>タグではさまれた文字を比較してみては？

Comments

[hdahrn]

回答ありがとうございます。
私のわかりにくい質問の意図を汲み取ってくださり、
なぜ間違えているのかを指摘していただき、
理解できました。
また、より良いアプローチ方法を指南していただき、
次に考える方向性を見出すことができました。
しかし、残念ながら私の方ではhiim様のアプローチ方法では、自分で目的のものを組むことができませんでした。本当に私の勉強不足で申し訳ない限りです。
この件につきましては、できるまで挑戦したいと思います。
質問して早くに回答してくださったこと本当にうれしく思います。
ありがとうございました。
深く感謝いたします。