「現在のページと同じリンク先」をjQueryで判定する

Question

目的

「現在のページと同じリンク先」を判定しその際にアラートさせたいです。

現状

次のコードでは目的が実現できませんでした。原因と対策を教えて頂けませんでしょうか。

<a href="http://example.com">link1</a>
<a href="http://example.com/page/2">link2</a>
<a href="http://example.com/apple">link3</a>

<script>
$(document).on("click","a", function(){	
  var currentUrl = location.href;
  var targetUrl = $(this).attr('href');
  if( currentUrl == targetUrl ){
    alert('現在のページと同じリンク先です');
  }	    
});	
</script>

Comments

[m.ts10806]

現在のコードで起きている問題、現象を具体的に記載してください

[m.ts10806]

回答ついてますがアラートだけで済ますのでしょうか？
今のままでしたら判定できてもページ遷移は行われます

Answer 1

こうかな？

  var currentUrl = location.href;
  var targetUrl = $(this).prop('href'); // 
  if( currentUrl == targetUrl ){
    alert('現在のページと同じリンク先です');
    return false; // 追加
  }

【【jQuery】アンカータグから遷移後の絶対パスを取得する方法！！｜By U Zensen.】
https://byuzensen.com/a-href-get-url

Comments

[cuteboy]

そっか、return false;はこう使うんですね。リンクまでありがとうございます。勉強しておきます。

Answer 2

.attr()では、タグ情報を取得するだけしかできません。
.prop()とすることで、javascriptで扱うプロパティの値として取得することができます。
そうすると、「http://~」の形式で取得できます。

	var currentUrl = location.href;
	var targetUrl = $(this).prop('href');
	if( currentUrl == targetUrl ){
		alert('現在のページと同じリンク先です');
	}

Comments

[cuteboy]

attrとpropについてありがとうございます。覚えておきます。