リンク内のテキストを取得するときに、画像の場合はaltを取得するようにする

JavaScriptを使ってページ内の全てのリンクにイベントトラッキングを設定する機会があったのですが、labelにリンク内のテキストを指定しようとしたときにリンク内が画像の場合もあったので、たいした処理ではないですが実装方法をメモしておきます。

サンプルコード

HTML

<p><a href="">リンク内テキスト</a></p>
<p><a href=""><img src="./img.jpg" alt="画像のalt" width="120" height="90" /></a></p>

JavaScript

$(function() {
	$('a').on('click', function(e) {
		var thisText = $(this).text();
		console.log(thisText);

		e.preventDefault();
	});
});

テキストリンクは取得できていますが、画像リンクの場合は空文字が返ってきます。
対応前のデモページ
 

取得したテキストが空文字で、リンクの子孫要素にimgがある場合に、その画像のaltを使用するようにしました。

JavaScript

$(function() {
	$('a').on('click', function(e) {
		var thisText = $(this).text();
		// リンク内のテキストが取得できている場合
		if(thisText !== '') {
			console.log(thisText);
		// リンク内に画像が含まれている場合はaltを使用する
		} else if($(this).find('img').length) {
			thisText = $(this).find('img').attr('alt');
			console.log(thisText);
		}

		e.preventDefault();
	});
});

画像が複数入っている場合、先頭の画像のaltが使用されます。
対応後のデモページ

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31