ど素人から毛を生やす。<延>

スマホのとき、画像クリックで通話できるように

Web > javascript 2015年12月23日(最終更新:1年前)

このページは2015.12.23に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

スマホ等で閲覧したとき、電話番号の記載されている画像なんかをクリックすると、電話できると良い。
それ自体の実現は、<a href="tel:0000000000">で可能だけど、PC閲覧時にこれは要らない。

この方法はいくつかあるだろうけど、今回はjQueryの、ユーザーエージェント識別で対応することにしました。
そこまでは問題ありません。
問題は、どうやってjsを使って、画像をaタグで囲むかどうかです。

単に、画像をaタグで囲むだけなら方法は色々ありますが、今回は、該当する画像が複数種類あるので厄介です。
できれば自動的に、imgタグ中に置いた値が反映されるようにしたい。

特定の要素をタグで囲むといえばwrapですが、単なるwrapでは、囲うタグの中に変数を設置できないのです。

そこで、.wrap( function(index) )を使います。

$('img').wrap(function(index) {
	return '<a href="tel:' + $(this).attr("class") + '" />';
})

今回は、hrefに設置したい値をクラスに入れました。
.wrap( function(index) )、つまり要素を囲むwrapを関数化したものですが、こちらだと変数が設置可能です。
引数をindexとすると、indexには1つ1つの要素が入ります。foreachでループしてるような感じになります。

ユーザーエージェントで判別するところまでつけるとこうなります。

$(document).ready(function(){
	if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
		$('img').wrap(function(index) {
			return '<a href="tel:' + $(this).attr("class") + '" />';
		})
	}
});

 

参考サイト
blog→in【スマートフォン&タブレットとパソコンで別のJavaScriptを実行】
js STUDIO【.wrap() 】

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)