aタグクリックで取得したパラメータを付与したURLを組み立て、一度のクリックで動作させたいがどうしたらいいか？

Question

HTML

<a href="#" id="GRP01">AAAAAA</a>
<a href="#" id="GRP02">BBBBBB</a>
<a href="#" id="GRP03">CCCCCC</a>
<div id="example-view"><iframe src="" data-src="http://www.foo.jp/view"></iframe></div>

JS

<script>
$( function(){
	$("a").click(function(e) {
		var id = $(this).attr("id");
		if(id){
			e.preventDefault();
			getParam(id);
		}
	});
});
function getParam(id){
  // http://www.foo.jp/view?param=id 　　へ遷移したい
}
</script>

●やりたいこと
HTMLのいずれかのaタグをクリックしたらgetParamを実行し、クリックして取得したidをパラメータにして
指定のURLを呼び出す
現状、パラメータ（aタグのid）を引き継げないで遷移していまいます。
URL自体はひとつで、一番問題になっているのはパラメータを取得できずに遷移してしまうこと。
必ず、パラメータ付きで遷移する方法はありますか？（遷移方法自体は、今は問題視していません。）
jsの書き方は合っているでしょうか？
以下の現状のように、パラメータがundefineになることは避けたいです。

●質問投稿時の状態
aタグをクリックすると、パラメータがundefineになりhttp://www.foo.jp/view?id=undefinedへ遷移してしまう。
必ず、パラメータ付きで遷移したいです。

●アドバイス後の現状
アドバイスいただいて上記のようにjsを修正しました。
今度は、２度クリックしないと期待どおり画面遷移しないという結果になり、新たな問題です。
つまり、「getParamが、２度クリックしないと実行されない」、これが大きな問題です。
どうしたら一度のクリックで期待どおりになるでしょうか？

どこを修正したらいいでしょうか？

Comments

[kszk311]

記載のコードだけでは、遷移する処理が全く書かれていません。これで遷移するだろうと考えた現状のコードを記載してください。

[sakura-shi]

JSとHTMLを少し編集しました。遷移自体はあまり問題視していなくて、問題は、パラメータを取得できずに（URLに引き継げずに）遷移してしまうことです。

Answer 1

意図せず別のところに遷移するより、最初から書き換えておいたほうがいいかと。

$(function(){
    $("a").each(function(index, element) {
        if (element.id) {
            element.href += '?param=' + element.id;
        }
    });
});

Answer 2

こんにちは。

以下にて、期待どおりの動作になると思います。

$(function(){
  $('a').on('click', function() {
    var href = $(this).attr('href') + '?param=' + $(this).attr('id');
    $(this).attr('href', href);
  } );
});

　　
以下、サンプルです。

https://jsfiddle.net/be7ev3au/9/

参考になれば幸いです。

Answer 3

セレクタであらかじめ限定しておいた方がいいかもですが、
範囲が$("a")で、対象がかなり広いかと思いますので、
IDが特に指定されていない時は通常のリンクとなるようにしています。
条件をどこまで細かくするか…

$(function(){
	$("a").click(function(e) {
		var id = $(this).attr("id");
		if(id){
			//if(id.match("GRP") !== null){/* 遷移する際のIDの文字列の条件（必要0. 番号リスト？） */
				e.preventDefault();

				//遷移処理
				console.log(id);

				return false;

			//}
		}
		
		//条件にマッチしなければ通常リンク
	});
})

Comments

[sakura-shi]

JSに詳しくないのですが、aタグを２度クリックしないと反応しない、という結果になりました。
２度クリックすると確かに期待した結果にはなります。
１度のクリックで操作できるようにするにはどうしたらよいでしょうか？

Answer 4

イベントを止めればよいかもしれません

$(function(){
  $("a").on('click',function(e) {
    e.preventDefault();
    var id = $(this).attr("id");
    $( function(){
      getParam(id);
    });
  });
  function getParam(id){
    console.log("param="+id);
  }
});