LogoMark.png

JavaScript/Tips

JavaScript Tips

よくある質問への回答|随時追加

CONTENTS


スクロールしただけで resize イベントが発生してしまう

iOS では、スクロール時にリサイズイベントが発火するので、そのたびにリサイズ時用の処理も同時に実行されてしまいます。リサイズ時の処理がメニューの表示にも関わるものであると「メニューを手繰ろうとしてスクロールするとリサイズ時の処理が動いてメニューが消えてしまう」といった問題が生じます。これを回避するには、本当にリサイズされたときにのみ、目的のコードが実行されるようにする必要があります。以下に事例を記載します。


iOS で要素をタッチしてもクリックイベントが発生しない

iOSでは HTMLで通常クリックが期待される要素(button、a など)以外、すなわち div、p、span などのクリックではイベントが発生しない仕組みになっているので、onClickでスクリプト を書いても処理が行われることがありません。

これを解決するには、当該要素を「クリックが期待される要素」として認識させる必要があり、これには、以下のように CSSを書くと解決します。

.target { cursor: pointer; }

基本的には Javascript で以下のようにきちんと記載すれば問題ありません。

$('.target').on('click', function(){ /* 処理内容 */});


タブレット iPad でホバリングメニューは?

要素に ontouchend を書き加えるだけでタブレット等でもホバリングが有効に

<div id="menuBar" ontouchend>


当該要素を特定する方法(jQuery)

例えば、画像を複数配置したページで、「マウスオーバーで画像のフェード」を実現するには?

例えば以下のような img 要素が複数列挙されているとします。

<img class="fade" src="images/xxxx.jpg">

同様の要素が複数ある場合、上記の .fade のように class を定義して操作するのが一般的ですが、以下のような単純な記述だと、すべての.fade 要素が一斉に動作してしまいます。

$(".fade").hover(
  function(){ $(.fade).fadeTo("slow", 1.0); },
  function(){ $(.fade).fadeTo("slow", 0.2); }
);

当該要素のみを選択的に操作するには this を使って以下のように記述します。

$(".fade").hover(
  function(){ $(this).fadeTo("slow", 1.0); },
  function(){ $(this).fadeTo("slow", 0.2); }
);

この事例は、以下にあります。
DEMO:https://koichi-inoue.github.io/JQ_Effects/
Download:https://github.com/koichi-inoue/JQ_Effects


隣接する要素を特定する方法(jQuery)

例えば、ボタンと画像のペアを複数配置したページで、「ボタンクリックで画像のトグル表示」を実現するには?。
例えば以下のような div 要素が複数列挙されているとします。

<div>
  <button class="button">Title</button>
  <img class="toggleImage"  src="images/monalisa.jpg">
</div>

同様の要素が複数ある場合、上記の .button や .toggleImage のように class を定義して操作するのが一般的ですが、以下のような単純な記述だと、すべての.toggleImage 要素が一斉にトグル動作してしまいます。

$(".button").click( function () {
  $(".toggleImage").slideToggle();
});

そこで、クリックされた要素に隣接した要素のみを選択的に操作するという方針で、this と next を使って以下のように記述すると、問題が解決します。

''$(this).next(要素).slideToggle();'' 

具体的には、以下のような書き方になります。

$( function(){
   $(".toggleImage").hide();      // 画像の初期状態(隠す)
   $(".button").click( function () {
     $(this).next(".toggleImage").slideToggle();
   });
});

サンプル:fileToggleSample.zip


jQueryのバージョンを上げたらエラー

開発コンソールで確認すると、以下のようなエラーが表示されることがあります。

Syntax error, unrecognized expression: a[href^=#] 

jQuery の仕様が変更されたため、以下の記述が問題となっています。

$('a[href^=#]').click(function () { ~

内側の引用符を足せばエラーは解消されると思います。

$('a[href^="#"]').click(function () { ~




PAGES

GUIDE

DATA

添付ファイル: fileToggleSample.zip 106件 [詳細]
Last-modified: 2020-06-17 (水) 11:27:28