JQueryの難しさ

以前制作させていたサイトではマウスオーバーでサムネイル画像を切り替える動きを組み込みました。いかんせん、自分は完全に独学なのであれこれ調べながらの実装でした。

ソースは以下。（CSSは割愛）

<script type="text/javascript">
jQuery(document).ready(function($) {? ? 
　　var _src = '',? ? ? ?
　　　　_target = '';
　　　　$('.imgonmouse li > img').hover( 

　　　　　　function(){ 
　　　　　　　　//mousehover
　　　　　　　　　　_target = $(this).data( 'targetid' ); //変更先DOMのid取得
　　　　　　　　　　_src = $(this).attr('src'); //自身の画像取得 
　　　　　　　　　　$('#' + _target).attr('src', _src);
　　　　　　　　　　},
　　　　　　　　　　function(){ 
　　　　　　　　　　　　//mouseout
　　　　　　　　　　}
　　　　　　　　)
　　});
</script>

<div class="imgonmouse">

<div><img id="imgonmouse_main" src="gazou_1.jpg" width="300" height="300" /></div>

  <ul>

    <li><img src="gazou_2.jpg" data-targetid="imgonmouse_main" /></li> 

    <li><img src="gazou_3.jpg" data-targetid="imgonmouse_main" /></li>

  </ul>

</div>

私の基本的な制作環境はWindows10で、ブラウザはGoogleChromeです。もちろん、FireFoxやOpera、Edgeは確認するためにインストールはしています。
今回のお客さまは基本BtoBのビジネスなのでパソコン環境がメインになります。

上記のコードを組み込んで作業を進め、自身の基本環境のChromeで確認して問題なく、お客様環境でも確認してもらい最終Fixしてもらいました。しかし、しばらくして自身の環境で確認するとマウスオーバーが効いていないことを発見。あれこれ調査するも原因不明で時間だけが経過する状況でした。

そこで、chromeの拡張プラグインでIE環境をシミュレートする「IE Tab」ものがあり、それで確認すると動作しました。また、ブラウザをFireFoxにしても動作しています。※Opera、Edgeは動作せず。

お客さまのChromeでも動作はしているようで、私固有環境の問題？？しかし、とても不思議な現象です。特にJavaScriptに影響を及ぼす拡張プラグインは入れていないので。。。また、IEのシミュレートやIE本体でも動作するのにEdgeで動作しないのも腑に落ちないところですね。

まだまだ勉強不足だと痛感しています。
これに加えて、タブレット端末でのタッチ操作にも対応させるなど、WEB制作に求められることはどんどん高度になってきています。しっかりとついていかないと！！
とりあえず、自分のChrome環境を解決しておかないと。。。